@qwik.dev/devtools 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/plugin/index.d.ts +4 -1
- package/dist/plugin/index.js +2078 -595
- package/dist/ui/_virtual/browser.qwik.mjs +8 -0
- package/dist/ui/_virtual/browser.qwik2.mjs +4 -0
- package/dist/ui/components/DevtoolsButton/DevtoolsButton.qwik.mjs +1 -1
- package/dist/ui/components/DevtoolsPanel/DevtoolsPanel.qwik.mjs +1 -1
- package/dist/ui/components/Tab/Tab.qwik.mjs +1 -1
- package/dist/ui/components/TabContent/TabContent.qwik.mjs +1 -1
- package/dist/ui/components/ThemeToggle/QwikThemeToggle.qwik.mjs +1 -1
- package/dist/ui/components/Tree/Tree.qwik.mjs +1 -1
- package/dist/ui/devtools.qwik.mjs +73 -72
- package/dist/ui/features/Assets/Assets.qwik.mjs +3 -3
- package/dist/ui/features/CodeBreack/CodeBreack.qwik.mjs +4 -4
- package/dist/ui/features/CodeBreack/HtmlParser.qwik.mjs +13 -20
- package/dist/ui/features/CodeBreack/StateParser.qwik.mjs +13 -20
- package/dist/ui/features/Overview/Overview.qwik.mjs +17 -17
- package/dist/ui/features/Packages/Packages.qwik.mjs +4 -4
- package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs +9 -9
- package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs +1 -1
- package/dist/ui/features/Performance/Performance.qwik.mjs +307 -0
- package/dist/ui/features/Performance/computePerfViewModel.qwik.mjs +101 -0
- package/dist/ui/features/Performance/transformPerformanceData.qwik.mjs +34 -0
- package/dist/ui/features/RenderTree/RenderTree.qwik.mjs +38 -45
- package/dist/ui/features/RenderTree/TreeBuilder.qwik.mjs +181 -0
- package/dist/ui/features/RenderTree/data.qwik.mjs +30 -16
- package/dist/ui/features/RenderTree/formatTreeData.qwik.mjs +205 -230
- package/dist/ui/features/RenderTree/types.qwik.mjs +50 -0
- package/dist/ui/features/Routes/Routes.qwik.mjs +3 -3
- package/dist/ui/features/inspect/Inspect.qwik.mjs +1 -1
- package/dist/ui/global.css.qwik.mjs +1 -1
- package/dist/ui/lib-types/kit/src/globals.d.ts +56 -5
- package/dist/ui/lib-types/kit/src/index.d.ts +1 -0
- package/dist/ui/lib-types/kit/src/types.d.ts +9 -0
- package/dist/ui/lib-types/ui/src/features/Performance/Performance.d.ts +1 -0
- package/dist/ui/lib-types/ui/src/features/Performance/computePerfViewModel.d.ts +33 -0
- package/dist/ui/lib-types/ui/src/features/Performance/computePerfViewModel.test.d.ts +1 -0
- package/dist/ui/lib-types/ui/src/features/Performance/transformPerformanceData.d.ts +22 -0
- package/dist/ui/lib-types/ui/src/features/Performance/transformPerformanceData.test.d.ts +1 -0
- package/dist/ui/lib-types/ui/src/features/RenderTree/TreeBuilder.d.ts +60 -0
- package/dist/ui/lib-types/ui/src/features/RenderTree/data.d.ts +34 -8
- package/dist/ui/lib-types/ui/src/features/RenderTree/formatTreeData.d.ts +79 -148
- package/dist/ui/lib-types/ui/src/features/RenderTree/index.d.ts +6 -0
- package/dist/ui/lib-types/ui/src/features/RenderTree/types.d.ts +116 -0
- package/dist/ui/lib-types/ui/src/types/state.d.ts +1 -1
- package/dist/ui/lib-types/ui/src/utils/shiki.d.ts +2 -0
- package/dist/ui/node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs +19 -0
- package/dist/ui/node_modules/.pnpm/debug@4.4.3_supports-color@5.5.0/node_modules/debug/src/browser.qwik.mjs +177 -0
- package/dist/ui/node_modules/.pnpm/debug@4.4.3_supports-color@5.5.0/node_modules/debug/src/common.qwik.mjs +182 -0
- package/dist/ui/node_modules/.pnpm/ms@2.1.3/node_modules/ms/index.qwik.mjs +120 -0
- package/dist/ui/packages/kit/src/constants.qwik.mjs +0 -2
- package/dist/ui/packages/kit/src/context.qwik.mjs +5 -4
- package/dist/ui/utils/shiki.qwik.mjs +23 -0
- package/package.json +3 -3
- package/dist/ui/features/RenderTree/transfromqseq.qwik.mjs +0 -91
- package/dist/ui/lib-types/ui/src/features/RenderTree/transfromqseq.d.ts +0 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const globalCss = '/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) 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: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\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-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n --color-red-400: oklch(70.4% .191 22.216);\n --color-amber-400: oklch(82.8% .189 84.429);\n --color-green-400: oklch(79.2% .209 151.711);\n --color-emerald-100: oklch(95% .052 163.051);\n --color-emerald-300: oklch(84.5% .143 164.978);\n --color-emerald-700: oklch(50.8% .118 165.612);\n --color-emerald-900: oklch(37.8% .077 168.94);\n --color-blue-400: oklch(70.7% .165 254.624);\n --color-violet-300: oklch(81.1% .111 293.571);\n --color-violet-400: oklch(70.2% .183 293.541);\n --color-purple-400: oklch(71.4% .203 305.504);\n --color-pink-400: oklch(71.8% .202 349.761);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\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-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-relaxed: 1.625;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --drop-shadow-md: 0 3px 3px #0000001f;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --animate-spin: spin 1s linear infinite;\n --blur-md: 12px;\n --blur-lg: 16px;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-background: #fff;\n --color-foreground: #000;\n --color-primary: #10b981;\n --color-primary-active: #047857;\n --color-muted-foreground: #6b7280;\n --color-accent: #10b981;\n --color-border: #e5e7eb;\n --color-card: #f2f2f2;\n --color-card-item-bg: #00000005;\n --color-card-item-hover-bg: #00000008;\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(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\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 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(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\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: -.25em;\n }\n\n sup {\n top: -.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 }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\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\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 ::-webkit-calendar-picker-indicator {\n line-height: 1;\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 .qwik-devtools .pointer-events-none {\n pointer-events: none;\n }\n\n .qwik-devtools .absolute {\n position: absolute;\n }\n\n .qwik-devtools .fixed {\n position: fixed;\n }\n\n .qwik-devtools .relative {\n position: relative;\n }\n\n .qwik-devtools .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .right-0 {\n right: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .right-6 {\n right: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .z-\\[9999\\] {\n z-index: 9999;\n }\n\n .qwik-devtools .col-start-1 {\n grid-column-start: 1;\n }\n\n .qwik-devtools .row-start-1 {\n grid-row-start: 1;\n }\n\n .qwik-devtools .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .qwik-devtools .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .qwik-devtools .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .qwik-devtools .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .qwik-devtools .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .qwik-devtools .container {\n max-width: 96rem;\n }\n }\n\n .qwik-devtools .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .mt-auto {\n margin-top: auto;\n }\n\n .qwik-devtools .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .qwik-devtools .flex {\n display: flex;\n }\n\n .qwik-devtools .grid {\n display: grid;\n }\n\n .qwik-devtools .inline-flex {\n display: inline-flex;\n }\n\n .qwik-devtools .aspect-square {\n aspect-ratio: 1;\n }\n\n .qwik-devtools .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .qwik-devtools .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .qwik-devtools .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .qwik-devtools .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .qwik-devtools .h-\\[60vh\\] {\n height: 60vh;\n }\n\n .qwik-devtools .h-\\[calc\\(100vh-3rem\\)\\] {\n height: calc(100vh - 3rem);\n }\n\n .qwik-devtools .h-full {\n height: 100%;\n }\n\n .qwik-devtools .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .min-h-\\[2\\.5rem\\] {\n min-height: 2.5rem;\n }\n\n .qwik-devtools .w-1\\/2 {\n width: 50%;\n }\n\n .qwik-devtools .w-3 {\n width: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .qwik-devtools .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .qwik-devtools .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .qwik-devtools .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .qwik-devtools .w-\\[calc\\(100vw-3rem\\)\\] {\n width: calc(100vw - 3rem);\n }\n\n .qwik-devtools .w-full {\n width: 100%;\n }\n\n .qwik-devtools .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .flex-1 {\n flex: 1;\n }\n\n .qwik-devtools .flex-shrink-0 {\n flex-shrink: 0;\n }\n\n .qwik-devtools .origin-center {\n transform-origin: center;\n }\n\n .qwik-devtools .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .qwik-devtools .-rotate-90 {\n rotate: -90deg;\n }\n\n .qwik-devtools .rotate-90 {\n rotate: 90deg;\n }\n\n .qwik-devtools .rotate-180 {\n rotate: 180deg;\n }\n\n .qwik-devtools .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .qwik-devtools .animate-spin {\n animation: var(--animate-spin);\n }\n\n .qwik-devtools .cursor-grab {\n cursor: grab;\n }\n\n .qwik-devtools .cursor-grabbing {\n cursor: grabbing;\n }\n\n .qwik-devtools .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .qwik-devtools .cursor-pointer {\n cursor: pointer;\n }\n\n .qwik-devtools .resize-none {\n resize: none;\n }\n\n .qwik-devtools .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .qwik-devtools .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .qwik-devtools .flex-col {\n flex-direction: column;\n }\n\n .qwik-devtools .place-items-center {\n place-items: center;\n }\n\n .qwik-devtools .items-center {\n align-items: center;\n }\n\n .qwik-devtools .items-start {\n align-items: flex-start;\n }\n\n .qwik-devtools .justify-between {\n justify-content: space-between;\n }\n\n .qwik-devtools .justify-center {\n justify-content: center;\n }\n\n .qwik-devtools .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n :where(.qwik-devtools .space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-4 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .qwik-devtools .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n :where(.qwik-devtools .space-x-2 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n }\n\n :where(.qwik-devtools .space-x-4 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .qwik-devtools .gap-y-3 {\n row-gap: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .qwik-devtools .overflow-auto {\n overflow: auto;\n }\n\n .qwik-devtools .overflow-hidden {\n overflow: hidden;\n }\n\n .qwik-devtools .overflow-x-auto {\n overflow-x: auto;\n }\n\n .qwik-devtools .overflow-y-auto {\n overflow-y: auto;\n }\n\n .qwik-devtools .rounded {\n border-radius: .25rem;\n }\n\n .qwik-devtools .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .qwik-devtools .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .qwik-devtools .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .qwik-devtools .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .qwik-devtools .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .qwik-devtools .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .qwik-devtools .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .qwik-devtools .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .qwik-devtools .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .qwik-devtools .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .qwik-devtools .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .qwik-devtools .border-accent\\/30 {\n border-color: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-accent\\/30 {\n border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);\n }\n }\n\n .qwik-devtools .border-accent\\/50 {\n border-color: #10b98180;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-accent\\/50 {\n border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);\n }\n }\n\n .qwik-devtools .border-border {\n border-color: var(--color-border);\n }\n\n .qwik-devtools .border-border\\/50 {\n border-color: #e5e7eb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-border\\/50 {\n border-color: color-mix(in oklab, var(--color-border) 50%, transparent);\n }\n }\n\n .qwik-devtools .border-current {\n border-color: currentColor;\n }\n\n .qwik-devtools .border-emerald-300 {\n border-color: var(--color-emerald-300);\n }\n\n .qwik-devtools .border-primary\\/20 {\n border-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-primary\\/20 {\n border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .border-t-foreground\\/40 {\n border-top-color: #0006;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-t-foreground\\/40 {\n border-top-color: color-mix(in oklab, var(--color-foreground) 40%, transparent);\n }\n }\n\n .qwik-devtools .border-t-transparent {\n border-top-color: #0000;\n }\n\n .qwik-devtools .border-b-transparent {\n border-bottom-color: #0000;\n }\n\n .qwik-devtools .bg-accent {\n background-color: var(--color-accent);\n }\n\n .qwik-devtools .bg-background {\n background-color: var(--color-background);\n }\n\n .qwik-devtools .bg-background\\/95 {\n background-color: #fffffff2;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-background\\/95 {\n background-color: color-mix(in oklab, var(--color-background) 95%, transparent);\n }\n }\n\n .qwik-devtools .bg-black\\/20 {\n background-color: #0003;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-black\\/20 {\n background-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n }\n }\n\n .qwik-devtools .bg-card {\n background-color: var(--color-card);\n }\n\n .qwik-devtools .bg-card-item-bg {\n background-color: var(--color-card-item-bg);\n }\n\n .qwik-devtools .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n\n .qwik-devtools .bg-foreground\\/5 {\n background-color: #0000000d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-foreground\\/5 {\n background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n }\n }\n\n .qwik-devtools .bg-primary\\/5 {\n background-color: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-primary\\/5 {\n background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);\n }\n }\n\n .qwik-devtools .bg-primary\\/10 {\n background-color: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-primary\\/10 {\n background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .bg-transparent {\n background-color: #0000;\n }\n\n .qwik-devtools .bg-gradient-to-br {\n --tw-gradient-position: to bottom right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-from: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-from: color-mix(in oklab, var(--color-accent) 20%, transparent);\n }\n }\n\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-from: #0000;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-from: color-mix(in oklab, var(--color-primary) 0%, transparent);\n }\n }\n\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-from: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via: #0000;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via: color-mix(in oklab, var(--color-primary) 0%, transparent);\n }\n }\n\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-to: #10b98166;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-to: color-mix(in oklab, var(--color-accent) 40%, transparent);\n }\n }\n\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-to: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-to: color-mix(in oklab, var(--color-primary) 5%, transparent);\n }\n }\n\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-to: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-to: color-mix(in oklab, var(--color-primary) 30%, transparent);\n }\n }\n\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .object-cover {\n object-fit: cover;\n }\n\n .qwik-devtools .p-0\\.5 {\n padding: calc(var(--spacing) * .5);\n }\n\n .qwik-devtools .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .p-2\\.5 {\n padding: calc(var(--spacing) * 2.5);\n }\n\n .qwik-devtools .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .p-3\\.5 {\n padding: calc(var(--spacing) * 3.5);\n }\n\n .qwik-devtools .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .qwik-devtools .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .qwik-devtools .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .text-center {\n text-align: center;\n }\n\n .qwik-devtools .font-mono {\n font-family: var(--font-mono);\n }\n\n .qwik-devtools .font-sans {\n font-family: var(--font-sans);\n }\n\n .qwik-devtools .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n\n .qwik-devtools .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n\n .qwik-devtools .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .qwik-devtools .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .qwik-devtools .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .qwik-devtools .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .qwik-devtools .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .qwik-devtools .text-\\[10px\\] {\n font-size: 10px;\n }\n\n .qwik-devtools .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .qwik-devtools .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .qwik-devtools .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .qwik-devtools .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .qwik-devtools .break-all {\n word-break: break-all;\n }\n\n .qwik-devtools .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .qwik-devtools .text-accent {\n color: var(--color-accent);\n }\n\n .qwik-devtools .text-amber-400 {\n color: var(--color-amber-400);\n }\n\n .qwik-devtools .text-blue-400 {\n color: var(--color-blue-400);\n }\n\n .qwik-devtools .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n\n .qwik-devtools .text-foreground {\n color: var(--color-foreground);\n }\n\n .qwik-devtools .text-foreground\\/70 {\n color: #000000b3;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .text-foreground\\/70 {\n color: color-mix(in oklab, var(--color-foreground) 70%, transparent);\n }\n }\n\n .qwik-devtools .text-green-400 {\n color: var(--color-green-400);\n }\n\n .qwik-devtools .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n\n .qwik-devtools .text-pink-400 {\n color: var(--color-pink-400);\n }\n\n .qwik-devtools .text-primary {\n color: var(--color-primary);\n }\n\n .qwik-devtools .text-primary\\/50 {\n color: #10b98180;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .text-primary\\/50 {\n color: color-mix(in oklab, var(--color-primary) 50%, transparent);\n }\n }\n\n .qwik-devtools .text-purple-400 {\n color: var(--color-purple-400);\n }\n\n .qwik-devtools .text-red-400 {\n color: var(--color-red-400);\n }\n\n .qwik-devtools .text-violet-400 {\n color: var(--color-violet-400);\n }\n\n .qwik-devtools .text-white {\n color: var(--color-white);\n }\n\n .qwik-devtools .opacity-0 {\n opacity: 0;\n }\n\n .qwik-devtools .opacity-90 {\n opacity: .9;\n }\n\n .qwik-devtools .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-accent\\/35 {\n --tw-shadow-color: #10b98159;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .shadow-accent\\/35 {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 35%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n\n .qwik-devtools .drop-shadow-md {\n --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));\n --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .qwik-devtools .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .qwik-devtools .backdrop-blur-lg {\n --tw-backdrop-blur: blur(var(--blur-lg));\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .qwik-devtools .backdrop-blur-md {\n --tw-backdrop-blur: blur(var(--blur-md));\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .qwik-devtools .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .qwik-devtools .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .qwik-devtools .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .qwik-devtools .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .qwik-devtools .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n @media (hover: hover) {\n .qwik-devtools .group-hover\\:scale-110:is(:where(.group):hover *) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .qwik-devtools .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n --tw-shadow-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n\n .qwik-devtools .group-active\\:scale-75:is(:where(.group):active *) {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n @media (hover: hover) {\n .qwik-devtools .hover\\:-translate-y-0\\.5:hover {\n --tw-translate-y: calc(var(--spacing) * -.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .qwik-devtools .hover\\:scale-110:hover {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .qwik-devtools .hover\\:rotate-3:hover {\n rotate: 3deg;\n }\n\n .qwik-devtools .hover\\:border-primary\\/30:hover {\n border-color: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:border-primary\\/30:hover {\n border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-card-item-hover-bg:hover {\n background-color: var(--color-card-item-hover-bg);\n }\n\n .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n background-color: #0000000d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-primary\\/10:hover {\n background-color: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-primary\\/10:hover {\n background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-primary\\/20:hover {\n background-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-primary\\/20:hover {\n background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:text-foreground:hover {\n color: var(--color-foreground);\n }\n\n .qwik-devtools .hover\\:text-primary:hover {\n color: var(--color-primary);\n }\n\n .qwik-devtools .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .qwik-devtools .hover\\:opacity-60:hover {\n opacity: .6;\n }\n\n .qwik-devtools .hover\\:opacity-90:hover {\n opacity: .9;\n }\n\n .qwik-devtools .hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n --tw-shadow-color: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 5%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n\n .qwik-devtools .focus\\:ring-primary-active:focus {\n --tw-ring-color: var(--color-primary-active);\n }\n\n .qwik-devtools .focus\\:ring-offset-0:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n\n @media (min-width: 40rem) {\n .qwik-devtools .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .sm\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n @media (min-width: 48rem) {\n .qwik-devtools .md\\:mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .qwik-devtools .md\\:px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n\n @media (min-width: 64rem) {\n .qwik-devtools .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .qwik-devtools .lg\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .qwik-devtools .dark\\:border-\\[\\#374151\\] {\n border-color: #374151;\n }\n\n .qwik-devtools .dark\\:border-emerald-700\\/40 {\n border-color: #00795666;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .dark\\:border-emerald-700\\/40 {\n border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);\n }\n }\n\n .qwik-devtools .dark\\:bg-\\[\\#1F2937\\] {\n background-color: #1f2937;\n }\n\n .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n background-color: #004e3b4d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n }\n }\n\n .qwik-devtools .dark\\:text-emerald-300 {\n color: var(--color-emerald-300);\n }\n\n .qwik-devtools .dark\\:text-violet-300 {\n color: var(--color-violet-300);\n }\n }\n\n .custom-scrollbar {\n scrollbar-width: thin;\n scrollbar-color: var(--color-scrollbar-thumb) transparent;\n }\n\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-track {\n background: none;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--color-scrollbar-thumb);\n border-radius: 20px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-scrollbar-thumb-hover);\n }\n}\n\n:root {\n --theme-name: "light";\n --color-background: #fff;\n --color-foreground: #000;\n --color-primary: #10b981;\n --color-primary-hover: #f2f2f2;\n --color-primary-active: #047857;\n --color-secondary: #6b7280;\n --color-border: #e5e7eb;\n --color-card: #f2f2f2;\n --color-card-item-bg: #00000005;\n --color-card-item-hover-bg: #00000008;\n --color-scrollbar-thumb: #d1d5db;\n --color-scrollbar-thumb-hover: #a1a1aa;\n --color-muted: #9ca3af;\n --color-muted-foreground: #6b7280;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n}\n\n:root[data-theme="dark"] {\n --theme-name: "dark";\n --color-background: #18181b;\n --color-foreground: #fff;\n --color-primary: #34d399;\n --color-primary-hover: #10b981;\n --color-primary-active: #059669;\n --color-secondary: #9ca3af;\n --color-border: #374151;\n --color-card: #27272a;\n --color-card-item-bg: #ffffff08;\n --color-card-item-hover-bg: #ffffff0d;\n --color-scrollbar-thumb: #3f3f46;\n --color-scrollbar-thumb-hover: #52525b;\n --color-muted: #374151;\n --color-muted-foreground: #9ca3af;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --theme-name: "dark";\n --color-background: #18181b;\n --color-foreground: #fff;\n --color-primary: #10b981;\n --color-secondary: #9ca3af;\n --color-border: #374151;\n --color-card: #27272a;\n --color-card-item-bg: #ffffff08;\n --color-card-item-hover-bg: #ffffff0d;\n --color-scrollbar-thumb: #3f3f46;\n --color-scrollbar-thumb-hover: #52525b;\n --color-muted: #374151;\n --color-muted-foreground: #9ca3af;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n }\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}\n\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-space-x-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-gradient-position {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-leading {\n syntax: "*";\n inherits: false\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: "<percentage>";\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: "<percentage>";\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: "<length>";\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-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n';
|
|
1
|
+
const globalCss = '/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) 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: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-space-x-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\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-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n --color-red-400: oklch(70.4% .191 22.216);\n --color-amber-400: oklch(82.8% .189 84.429);\n --color-green-400: oklch(79.2% .209 151.711);\n --color-emerald-100: oklch(95% .052 163.051);\n --color-emerald-300: oklch(84.5% .143 164.978);\n --color-emerald-700: oklch(50.8% .118 165.612);\n --color-emerald-900: oklch(37.8% .077 168.94);\n --color-blue-400: oklch(70.7% .165 254.624);\n --color-violet-300: oklch(81.1% .111 293.571);\n --color-violet-400: oklch(70.2% .183 293.541);\n --color-purple-400: oklch(71.4% .203 305.504);\n --color-pink-400: oklch(71.8% .202 349.761);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\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-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-relaxed: 1.625;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --drop-shadow-md: 0 3px 3px #0000001f;\n --ease-out: cubic-bezier(0, 0, .2, 1);\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --animate-spin: spin 1s linear infinite;\n --blur-md: 12px;\n --blur-lg: 16px;\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-background: #fff;\n --color-foreground: #000;\n --color-primary: #10b981;\n --color-primary-active: #047857;\n --color-muted-foreground: #6b7280;\n --color-accent: #10b981;\n --color-border: #e5e7eb;\n --color-card: #f2f2f2;\n --color-card-item-bg: #00000005;\n --color-card-item-hover-bg: #00000008;\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(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\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 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(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\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: -.25em;\n }\n\n sup {\n top: -.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 }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\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\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 ::-webkit-calendar-picker-indicator {\n line-height: 1;\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 .qwik-devtools .pointer-events-none {\n pointer-events: none;\n }\n\n .qwik-devtools .visible {\n visibility: visible;\n }\n\n .qwik-devtools .absolute {\n position: absolute;\n }\n\n .qwik-devtools .fixed {\n position: fixed;\n }\n\n .qwik-devtools .relative {\n position: relative;\n }\n\n .qwik-devtools .static {\n position: static;\n }\n\n .qwik-devtools .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .right-0 {\n right: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .right-6 {\n right: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .z-\\[9999\\] {\n z-index: 9999;\n }\n\n .qwik-devtools .col-start-1 {\n grid-column-start: 1;\n }\n\n .qwik-devtools .row-start-1 {\n grid-row-start: 1;\n }\n\n .qwik-devtools .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .qwik-devtools .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .qwik-devtools .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .qwik-devtools .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .qwik-devtools .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .qwik-devtools .container {\n max-width: 96rem;\n }\n }\n\n .qwik-devtools .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .mt-auto {\n margin-top: auto;\n }\n\n .qwik-devtools .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .qwik-devtools .flex {\n display: flex;\n }\n\n .qwik-devtools .grid {\n display: grid;\n }\n\n .qwik-devtools .hidden {\n display: none;\n }\n\n .qwik-devtools .inline-flex {\n display: inline-flex;\n }\n\n .qwik-devtools .aspect-square {\n aspect-ratio: 1;\n }\n\n .qwik-devtools .h-3 {\n height: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .qwik-devtools .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .qwik-devtools .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .qwik-devtools .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .qwik-devtools .h-\\[60vh\\] {\n height: 60vh;\n }\n\n .qwik-devtools .h-\\[calc\\(100vh-3rem\\)\\] {\n height: calc(100vh - 3rem);\n }\n\n .qwik-devtools .h-full {\n height: 100%;\n }\n\n .qwik-devtools .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .min-h-\\[2\\.5rem\\] {\n min-height: 2.5rem;\n }\n\n .qwik-devtools .w-1\\/2 {\n width: 50%;\n }\n\n .qwik-devtools .w-3 {\n width: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .w-6 {\n width: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .w-7 {\n width: calc(var(--spacing) * 7);\n }\n\n .qwik-devtools .w-8 {\n width: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .qwik-devtools .w-10 {\n width: calc(var(--spacing) * 10);\n }\n\n .qwik-devtools .w-12 {\n width: calc(var(--spacing) * 12);\n }\n\n .qwik-devtools .w-\\[420px\\] {\n width: 420px;\n }\n\n .qwik-devtools .w-\\[calc\\(100vw-3rem\\)\\] {\n width: calc(100vw - 3rem);\n }\n\n .qwik-devtools .w-full {\n width: 100%;\n }\n\n .qwik-devtools .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n\n .qwik-devtools .min-w-\\[320px\\] {\n min-width: 320px;\n }\n\n .qwik-devtools .flex-1 {\n flex: 1;\n }\n\n .qwik-devtools .flex-shrink-0, .qwik-devtools .shrink-0 {\n flex-shrink: 0;\n }\n\n .qwik-devtools .origin-center {\n transform-origin: center;\n }\n\n .qwik-devtools .translate-y-0 {\n --tw-translate-y: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .qwik-devtools .-rotate-90 {\n rotate: -90deg;\n }\n\n .qwik-devtools .rotate-90 {\n rotate: 90deg;\n }\n\n .qwik-devtools .rotate-180 {\n rotate: 180deg;\n }\n\n .qwik-devtools .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .qwik-devtools .animate-spin {\n animation: var(--animate-spin);\n }\n\n .qwik-devtools .cursor-grab {\n cursor: grab;\n }\n\n .qwik-devtools .cursor-grabbing {\n cursor: grabbing;\n }\n\n .qwik-devtools .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .qwik-devtools .cursor-pointer {\n cursor: pointer;\n }\n\n .qwik-devtools .resize-none {\n resize: none;\n }\n\n .qwik-devtools .grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr));\n }\n\n .qwik-devtools .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .qwik-devtools .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .qwik-devtools .flex-col {\n flex-direction: column;\n }\n\n .qwik-devtools .place-items-center {\n place-items: center;\n }\n\n .qwik-devtools .items-center {\n align-items: center;\n }\n\n .qwik-devtools .items-start {\n align-items: flex-start;\n }\n\n .qwik-devtools .justify-between {\n justify-content: space-between;\n }\n\n .qwik-devtools .justify-center {\n justify-content: center;\n }\n\n .qwik-devtools .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n :where(.qwik-devtools .space-y-2 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-3 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-4 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n :where(.qwik-devtools .space-y-6 > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n\n .qwik-devtools .gap-x-6 {\n column-gap: calc(var(--spacing) * 6);\n }\n\n :where(.qwik-devtools .space-x-2 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));\n }\n\n :where(.qwik-devtools .space-x-4 > :not(:last-child)) {\n --tw-space-x-reverse: 0;\n margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));\n margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));\n }\n\n .qwik-devtools .gap-y-3 {\n row-gap: calc(var(--spacing) * 3);\n }\n\n :where(.qwik-devtools .divide-y > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n\n :where(.qwik-devtools .divide-border > :not(:last-child)) {\n border-color: var(--color-border);\n }\n\n .qwik-devtools .truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .qwik-devtools .overflow-auto {\n overflow: auto;\n }\n\n .qwik-devtools .overflow-hidden {\n overflow: hidden;\n }\n\n .qwik-devtools .overflow-x-auto {\n overflow-x: auto;\n }\n\n .qwik-devtools .overflow-y-auto {\n overflow-y: auto;\n }\n\n .qwik-devtools .rounded {\n border-radius: .25rem;\n }\n\n .qwik-devtools .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .qwik-devtools .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .qwik-devtools .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .qwik-devtools .rounded-xl {\n border-radius: var(--radius-xl);\n }\n\n .qwik-devtools .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .qwik-devtools .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .qwik-devtools .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .qwik-devtools .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n\n .qwik-devtools .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .qwik-devtools .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n\n .qwik-devtools .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n\n .qwik-devtools .border-accent\\/30 {\n border-color: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-accent\\/30 {\n border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);\n }\n }\n\n .qwik-devtools .border-accent\\/50 {\n border-color: #10b98180;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-accent\\/50 {\n border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);\n }\n }\n\n .qwik-devtools .border-border {\n border-color: var(--color-border);\n }\n\n .qwik-devtools .border-border\\/50 {\n border-color: #e5e7eb80;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-border\\/50 {\n border-color: color-mix(in oklab, var(--color-border) 50%, transparent);\n }\n }\n\n .qwik-devtools .border-current {\n border-color: currentColor;\n }\n\n .qwik-devtools .border-emerald-300 {\n border-color: var(--color-emerald-300);\n }\n\n .qwik-devtools .border-primary\\/20 {\n border-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-primary\\/20 {\n border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .border-t-foreground\\/40 {\n border-top-color: #0006;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .border-t-foreground\\/40 {\n border-top-color: color-mix(in oklab, var(--color-foreground) 40%, transparent);\n }\n }\n\n .qwik-devtools .border-t-transparent {\n border-top-color: #0000;\n }\n\n .qwik-devtools .border-b-transparent {\n border-bottom-color: #0000;\n }\n\n .qwik-devtools .bg-accent {\n background-color: var(--color-accent);\n }\n\n .qwik-devtools .bg-background {\n background-color: var(--color-background);\n }\n\n .qwik-devtools .bg-background\\/95 {\n background-color: #fffffff2;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-background\\/95 {\n background-color: color-mix(in oklab, var(--color-background) 95%, transparent);\n }\n }\n\n .qwik-devtools .bg-black\\/20 {\n background-color: #0003;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-black\\/20 {\n background-color: color-mix(in oklab, var(--color-black) 20%, transparent);\n }\n }\n\n .qwik-devtools .bg-card {\n background-color: var(--color-card);\n }\n\n .qwik-devtools .bg-card-item-bg {\n background-color: var(--color-card-item-bg);\n }\n\n .qwik-devtools .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n\n .qwik-devtools .bg-foreground\\/5 {\n background-color: #0000000d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-foreground\\/5 {\n background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n }\n }\n\n .qwik-devtools .bg-primary\\/5 {\n background-color: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-primary\\/5 {\n background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);\n }\n }\n\n .qwik-devtools .bg-primary\\/10 {\n background-color: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .bg-primary\\/10 {\n background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .bg-transparent {\n background-color: #0000;\n }\n\n .qwik-devtools .bg-gradient-to-br {\n --tw-gradient-position: to bottom right in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-from: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-from: color-mix(in oklab, var(--color-accent) 20%, transparent);\n }\n }\n\n .qwik-devtools .from-accent\\/20 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-from: #0000;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-from: color-mix(in oklab, var(--color-primary) 0%, transparent);\n }\n }\n\n .qwik-devtools .from-primary\\/0 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-from: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-from: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .from-primary\\/10 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via: #0000;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via: color-mix(in oklab, var(--color-primary) 0%, transparent);\n }\n }\n\n .qwik-devtools .via-primary\\/0 {\n --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .via-primary\\/20 {\n --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-via-stops);\n }\n\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-to: #10b98166;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-to: color-mix(in oklab, var(--color-accent) 40%, transparent);\n }\n }\n\n .qwik-devtools .to-accent\\/40 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-to: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-to: color-mix(in oklab, var(--color-primary) 5%, transparent);\n }\n }\n\n .qwik-devtools .to-primary\\/5 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-to: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-to: color-mix(in oklab, var(--color-primary) 30%, transparent);\n }\n }\n\n .qwik-devtools .to-primary\\/30 {\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n\n .qwik-devtools .object-cover {\n object-fit: cover;\n }\n\n .qwik-devtools .p-0\\.5 {\n padding: calc(var(--spacing) * .5);\n }\n\n .qwik-devtools .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .p-1\\.5 {\n padding: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .p-2\\.5 {\n padding: calc(var(--spacing) * 2.5);\n }\n\n .qwik-devtools .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .p-3\\.5 {\n padding: calc(var(--spacing) * 3.5);\n }\n\n .qwik-devtools .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n\n .qwik-devtools .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n\n .qwik-devtools .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .qwik-devtools .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n\n .qwik-devtools .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n\n .qwik-devtools .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .qwik-devtools .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .qwik-devtools .py-4 {\n padding-block: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .qwik-devtools .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .qwik-devtools .pb-6 {\n padding-bottom: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .text-center {\n text-align: center;\n }\n\n .qwik-devtools .text-left {\n text-align: left;\n }\n\n .qwik-devtools .text-right {\n text-align: right;\n }\n\n .qwik-devtools .font-mono {\n font-family: var(--font-mono);\n }\n\n .qwik-devtools .font-sans {\n font-family: var(--font-sans);\n }\n\n .qwik-devtools .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n\n .qwik-devtools .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n\n .qwik-devtools .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .qwik-devtools .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .qwik-devtools .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .qwik-devtools .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .qwik-devtools .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .qwik-devtools .text-\\[10px\\] {\n font-size: 10px;\n }\n\n .qwik-devtools .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n\n .qwik-devtools .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .qwik-devtools .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n\n .qwik-devtools .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .qwik-devtools .break-all {\n word-break: break-all;\n }\n\n .qwik-devtools .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .qwik-devtools .text-accent {\n color: var(--color-accent);\n }\n\n .qwik-devtools .text-amber-400 {\n color: var(--color-amber-400);\n }\n\n .qwik-devtools .text-blue-400 {\n color: var(--color-blue-400);\n }\n\n .qwik-devtools .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n\n .qwik-devtools .text-foreground {\n color: var(--color-foreground);\n }\n\n .qwik-devtools .text-foreground\\/70 {\n color: #000000b3;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .text-foreground\\/70 {\n color: color-mix(in oklab, var(--color-foreground) 70%, transparent);\n }\n }\n\n .qwik-devtools .text-green-400 {\n color: var(--color-green-400);\n }\n\n .qwik-devtools .text-muted-foreground {\n color: var(--color-muted-foreground);\n }\n\n .qwik-devtools .text-pink-400 {\n color: var(--color-pink-400);\n }\n\n .qwik-devtools .text-primary {\n color: var(--color-primary);\n }\n\n .qwik-devtools .text-primary\\/50 {\n color: #10b98180;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .text-primary\\/50 {\n color: color-mix(in oklab, var(--color-primary) 50%, transparent);\n }\n }\n\n .qwik-devtools .text-purple-400 {\n color: var(--color-purple-400);\n }\n\n .qwik-devtools .text-red-400 {\n color: var(--color-red-400);\n }\n\n .qwik-devtools .text-violet-400 {\n color: var(--color-violet-400);\n }\n\n .qwik-devtools .text-white {\n color: var(--color-white);\n }\n\n .qwik-devtools .opacity-0 {\n opacity: 0;\n }\n\n .qwik-devtools .opacity-90 {\n opacity: .9;\n }\n\n .qwik-devtools .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .ring-2 {\n --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .shadow-accent\\/35 {\n --tw-shadow-color: #10b98159;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .shadow-accent\\/35 {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-accent) 35%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n\n .qwik-devtools .ring-primary-active {\n --tw-ring-color: var(--color-primary-active);\n }\n\n .qwik-devtools .drop-shadow-md {\n --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));\n --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .qwik-devtools .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .qwik-devtools .backdrop-blur-lg {\n --tw-backdrop-blur: blur(var(--blur-lg));\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .qwik-devtools .backdrop-blur-md {\n --tw-backdrop-blur: blur(var(--blur-md));\n -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );\n }\n\n .qwik-devtools .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .qwik-devtools .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .qwik-devtools .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .qwik-devtools .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .qwik-devtools .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n\n .qwik-devtools .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n\n @media (hover: hover) {\n .qwik-devtools .group-hover\\:scale-110:is(:where(.group):hover *) {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .qwik-devtools .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n --tw-shadow-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .group-hover\\:shadow-primary\\/20:is(:where(.group):hover *) {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 20%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n\n .qwik-devtools .group-active\\:scale-75:is(:where(.group):active *) {\n --tw-scale-x: 75%;\n --tw-scale-y: 75%;\n --tw-scale-z: 75%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n @media (hover: hover) {\n .qwik-devtools .hover\\:-translate-y-0\\.5:hover {\n --tw-translate-y: calc(var(--spacing) * -.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .qwik-devtools .hover\\:scale-110:hover {\n --tw-scale-x: 110%;\n --tw-scale-y: 110%;\n --tw-scale-z: 110%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n\n .qwik-devtools .hover\\:rotate-3:hover {\n rotate: 3deg;\n }\n\n .qwik-devtools .hover\\:border-primary\\/30:hover {\n border-color: #10b9814d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:border-primary\\/30:hover {\n border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-card-item-hover-bg:hover {\n background-color: var(--color-card-item-hover-bg);\n }\n\n .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n background-color: #0000000d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-foreground\\/5:hover {\n background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-primary\\/10:hover {\n background-color: #10b9811a;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-primary\\/10:hover {\n background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:bg-primary\\/20:hover {\n background-color: #10b98133;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:bg-primary\\/20:hover {\n background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);\n }\n }\n\n .qwik-devtools .hover\\:text-foreground:hover {\n color: var(--color-foreground);\n }\n\n .qwik-devtools .hover\\:text-primary:hover {\n color: var(--color-primary);\n }\n\n .qwik-devtools .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .qwik-devtools .hover\\:opacity-60:hover {\n opacity: .6;\n }\n\n .qwik-devtools .hover\\:opacity-90:hover {\n opacity: .9;\n }\n\n .qwik-devtools .hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n --tw-shadow-color: #10b9810d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .hover\\:shadow-primary\\/5:hover {\n --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-primary) 5%, transparent) var(--tw-shadow-alpha), transparent);\n }\n }\n }\n\n .qwik-devtools .focus\\:ring-primary-active:focus {\n --tw-ring-color: var(--color-primary-active);\n }\n\n .qwik-devtools .focus\\:ring-offset-0:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n\n @media (min-width: 40rem) {\n .qwik-devtools .sm\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .sm\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n\n @media (min-width: 48rem) {\n .qwik-devtools .md\\:mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .qwik-devtools .md\\:grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n\n .qwik-devtools .md\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .qwik-devtools .md\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n\n .qwik-devtools .md\\:px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n }\n\n @media (min-width: 64rem) {\n .qwik-devtools .lg\\:grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .qwik-devtools .lg\\:grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n }\n\n @media (prefers-color-scheme: dark) {\n .qwik-devtools .dark\\:border-\\[\\#374151\\] {\n border-color: #374151;\n }\n\n .qwik-devtools .dark\\:border-emerald-700\\/40 {\n border-color: #00795666;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .dark\\:border-emerald-700\\/40 {\n border-color: color-mix(in oklab, var(--color-emerald-700) 40%, transparent);\n }\n }\n\n .qwik-devtools .dark\\:bg-\\[\\#1F2937\\] {\n background-color: #1f2937;\n }\n\n .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n background-color: #004e3b4d;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n .qwik-devtools .dark\\:bg-emerald-900\\/30 {\n background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);\n }\n }\n\n .qwik-devtools .dark\\:text-emerald-300 {\n color: var(--color-emerald-300);\n }\n\n .qwik-devtools .dark\\:text-violet-300 {\n color: var(--color-violet-300);\n }\n }\n\n .custom-scrollbar {\n scrollbar-width: thin;\n scrollbar-color: var(--color-scrollbar-thumb) transparent;\n }\n\n .custom-scrollbar::-webkit-scrollbar {\n width: 6px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-track {\n background: none;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--color-scrollbar-thumb);\n border-radius: 20px;\n }\n\n .custom-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-scrollbar-thumb-hover);\n }\n}\n\n:root {\n --theme-name: "light";\n --color-background: #fff;\n --color-foreground: #000;\n --color-primary: #10b981;\n --color-primary-hover: #f2f2f2;\n --color-primary-active: #047857;\n --color-secondary: #6b7280;\n --color-border: #e5e7eb;\n --color-card: #f2f2f2;\n --color-card-item-bg: #00000005;\n --color-card-item-hover-bg: #00000008;\n --color-scrollbar-thumb: #d1d5db;\n --color-scrollbar-thumb-hover: #a1a1aa;\n --color-muted: #9ca3af;\n --color-muted-foreground: #6b7280;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n}\n\n:root[data-theme="dark"] {\n --theme-name: "dark";\n --color-background: #18181b;\n --color-foreground: #fff;\n --color-primary: #34d399;\n --color-primary-hover: #10b981;\n --color-primary-active: #059669;\n --color-secondary: #9ca3af;\n --color-border: #374151;\n --color-card: #27272a;\n --color-card-item-bg: #ffffff08;\n --color-card-item-hover-bg: #ffffff0d;\n --color-scrollbar-thumb: #3f3f46;\n --color-scrollbar-thumb-hover: #52525b;\n --color-muted: #374151;\n --color-muted-foreground: #9ca3af;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme]) {\n --theme-name: "dark";\n --color-background: #18181b;\n --color-foreground: #fff;\n --color-primary: #10b981;\n --color-secondary: #9ca3af;\n --color-border: #374151;\n --color-card: #27272a;\n --color-card-item-bg: #ffffff08;\n --color-card-item-hover-bg: #ffffff0d;\n --color-scrollbar-thumb: #3f3f46;\n --color-scrollbar-thumb-hover: #52525b;\n --color-muted: #374151;\n --color-muted-foreground: #9ca3af;\n --color-accent: #10b981;\n --color-input: var(--color-border);\n --color-ring: var(--color-primary);\n }\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}\n\n@property --tw-rotate-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-space-y-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-space-x-reverse {\n syntax: "*";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-divide-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-gradient-position {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n\n@property --tw-gradient-stops {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-via-stops {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-leading {\n syntax: "*";\n inherits: false\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: "<percentage>";\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: "<percentage>";\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: "<length>";\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-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-blur {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-brightness {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-contrast {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-grayscale {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-hue-rotate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-invert {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-opacity {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-saturate {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-backdrop-sepia {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: "*";\n inherits: false\n}\n\n@property --tw-scale-x {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-y {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@property --tw-scale-z {\n syntax: "*";\n inherits: false;\n initial-value: 1;\n}\n\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n';
|
|
2
2
|
export {
|
|
3
3
|
globalCss as default
|
|
4
4
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ViteDevServer } from 'vite';
|
|
2
|
-
import {
|
|
2
|
+
import { ParsedStructure } from './types';
|
|
3
3
|
interface EventEmitter {
|
|
4
4
|
on: (name: string, handler: (data: any) => void) => void;
|
|
5
5
|
send: (name: string, ...args: any[]) => void;
|
|
@@ -11,10 +11,61 @@ export declare const CLIENT_CTX = "__qwik_client_ctx__";
|
|
|
11
11
|
export declare const SERVER_CTX = "__qwik_server_ctx__";
|
|
12
12
|
export declare const SERVER_RPC = "__qwik_server_rpc__";
|
|
13
13
|
export declare const CLIENT_RPC = "__qwik_client_rpc__";
|
|
14
|
+
export type QwikPerfPhaseRemembered = 'ssr' | 'csr';
|
|
15
|
+
export interface QwikPerfErrorRemembered {
|
|
16
|
+
name: string;
|
|
17
|
+
message: string;
|
|
18
|
+
}
|
|
19
|
+
export interface QwikPerfEntryRemembered {
|
|
20
|
+
id: number;
|
|
21
|
+
component: string;
|
|
22
|
+
phase: QwikPerfPhaseRemembered;
|
|
23
|
+
duration: number;
|
|
24
|
+
start: number;
|
|
25
|
+
end: number;
|
|
26
|
+
error?: QwikPerfErrorRemembered;
|
|
27
|
+
/**
|
|
28
|
+
* Present for wrapped `_component_` render-function modules; helps de-dupe.
|
|
29
|
+
*/
|
|
30
|
+
viteId?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Present for wrapped `_component_` render-function modules.
|
|
33
|
+
*/
|
|
34
|
+
renderCount?: number;
|
|
35
|
+
}
|
|
36
|
+
export interface QwikPerfStoreRemembered {
|
|
37
|
+
ssr: QwikPerfEntryRemembered[];
|
|
38
|
+
csr: QwikPerfEntryRemembered[];
|
|
39
|
+
}
|
|
40
|
+
export interface DevtoolsRenderStats {
|
|
41
|
+
/**
|
|
42
|
+
* In-memory performance store written by devtools instrumentation.
|
|
43
|
+
* (Populated at runtime; optional in types.)
|
|
44
|
+
*/
|
|
45
|
+
perf?: QwikPerfStoreRemembered;
|
|
46
|
+
}
|
|
47
|
+
export interface ComponentDevtoolsState {
|
|
48
|
+
hooks: ParsedStructure[];
|
|
49
|
+
stats: DevtoolsRenderStats;
|
|
50
|
+
}
|
|
51
|
+
declare global {
|
|
52
|
+
interface Window {
|
|
53
|
+
QWIK_DEVTOOLS_GLOBAL_STATE?: Record<string, ComponentDevtoolsState>;
|
|
54
|
+
/**
|
|
55
|
+
* Performance store (CSR + injected SSR snapshot).
|
|
56
|
+
* Written by `@devtools/plugin` instrumentation.
|
|
57
|
+
*/
|
|
58
|
+
__QWIK_PERF__?: QwikPerfStoreRemembered;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
14
61
|
declare global {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
62
|
+
namespace NodeJS {
|
|
63
|
+
interface Process {
|
|
64
|
+
__QWIK_SSR_PERF__?: QwikPerfEntryRemembered[];
|
|
65
|
+
__QWIK_SSR_PERF_SET__?: Set<string>;
|
|
66
|
+
__QWIK_SSR_PERF_ID__?: number;
|
|
67
|
+
__QWIK_SSR_PERF_INDEX__?: Record<string, number>;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
19
70
|
}
|
|
20
71
|
export {};
|
|
@@ -12,6 +12,15 @@ export interface ServerFunctions {
|
|
|
12
12
|
getRoutes: () => any;
|
|
13
13
|
getQwikPackages: () => Promise<[string, string][]>;
|
|
14
14
|
getAllDependencies: () => Promise<any[]>;
|
|
15
|
+
getDependenciesStatus: () => Promise<{
|
|
16
|
+
phase: 'idle' | 'phase1' | 'phase2' | 'done' | 'error';
|
|
17
|
+
loaded: number;
|
|
18
|
+
total: number;
|
|
19
|
+
startedAt: number | null;
|
|
20
|
+
finishedAt: number | null;
|
|
21
|
+
error?: string;
|
|
22
|
+
}>;
|
|
23
|
+
refreshDependencies: () => Promise<void>;
|
|
15
24
|
installPackage: (packageName: string, isDev?: boolean) => Promise<{
|
|
16
25
|
success: boolean;
|
|
17
26
|
error?: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Performance: import("@qwik.dev/core").Component<unknown>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { QwikPerfStoreRemembered } from '@devtools/kit';
|
|
2
|
+
import { type PerfGroupedCsrItem, type PerfSsrItem } from './transformPerformanceData';
|
|
3
|
+
export type PerfPayload = QwikPerfStoreRemembered;
|
|
4
|
+
export interface PerfOverviewVm {
|
|
5
|
+
totalRenderTime: number;
|
|
6
|
+
totalCalls: number;
|
|
7
|
+
avgTime: number;
|
|
8
|
+
slowestComponent?: {
|
|
9
|
+
componentName: string;
|
|
10
|
+
avgTime: number;
|
|
11
|
+
totalTime: number;
|
|
12
|
+
calls: number;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
export interface PerfComponentVm {
|
|
16
|
+
componentName: string;
|
|
17
|
+
totalTime: number;
|
|
18
|
+
calls: number;
|
|
19
|
+
avgTime: number;
|
|
20
|
+
ssr?: PerfSsrItem;
|
|
21
|
+
csrItems: PerfGroupedCsrItem[];
|
|
22
|
+
}
|
|
23
|
+
export interface PerfEventVm {
|
|
24
|
+
eventName: string;
|
|
25
|
+
time: number;
|
|
26
|
+
calls: number;
|
|
27
|
+
}
|
|
28
|
+
export interface PerfViewModel {
|
|
29
|
+
overview: PerfOverviewVm;
|
|
30
|
+
components: PerfComponentVm[];
|
|
31
|
+
}
|
|
32
|
+
export declare function computeEventRows(csrItems: PerfGroupedCsrItem[]): PerfEventVm[];
|
|
33
|
+
export declare function computePerfViewModel(perf: PerfPayload | undefined | null): PerfViewModel;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { QwikPerfEntryRemembered, QwikPerfStoreRemembered } from '@devtools/kit';
|
|
2
|
+
export type PerfPayload = QwikPerfStoreRemembered;
|
|
3
|
+
export type PerfSsrItem = QwikPerfEntryRemembered & {
|
|
4
|
+
phase: 'ssr';
|
|
5
|
+
ssrCount?: number;
|
|
6
|
+
};
|
|
7
|
+
export type PerfCsrItem = QwikPerfEntryRemembered & {
|
|
8
|
+
phase: 'csr';
|
|
9
|
+
};
|
|
10
|
+
export interface PerfParsedNames {
|
|
11
|
+
componentName: string;
|
|
12
|
+
eventName?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function parseComponentAndEventName(component: string): PerfParsedNames;
|
|
15
|
+
/**
|
|
16
|
+
* Groups CSR records by SSR component name (split by `_component_`).
|
|
17
|
+
* - key: the SSR item object reference (WeakMap key)
|
|
18
|
+
* - value: CSR list belonging to that SSR component
|
|
19
|
+
* - unmatched CSR items: dropped
|
|
20
|
+
*/
|
|
21
|
+
export type PerfGroupedCsrItem = PerfCsrItem & PerfParsedNames;
|
|
22
|
+
export declare function groupCsrBySsr(data: PerfPayload): WeakMap<PerfSsrItem, PerfGroupedCsrItem[]>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { TreeNode } from '../../components/Tree/Tree';
|
|
2
|
+
/**
|
|
3
|
+
* Builder class for creating TreeNode structures from objects.
|
|
4
|
+
* Handles all types of data transformation to tree format.
|
|
5
|
+
*/
|
|
6
|
+
export declare class TreeBuilder {
|
|
7
|
+
private idCounter;
|
|
8
|
+
/**
|
|
9
|
+
* Generate a unique ID for a tree node
|
|
10
|
+
*/
|
|
11
|
+
private generateId;
|
|
12
|
+
/**
|
|
13
|
+
* Reset the ID counter (useful for testing)
|
|
14
|
+
*/
|
|
15
|
+
resetIdCounter(): void;
|
|
16
|
+
/**
|
|
17
|
+
* Create a group node (parent node with children)
|
|
18
|
+
*/
|
|
19
|
+
createGroupNode(label: string, children?: TreeNode[]): TreeNode;
|
|
20
|
+
/**
|
|
21
|
+
* Convert any object to TreeNode array
|
|
22
|
+
*/
|
|
23
|
+
objectToTree(obj: unknown, parentPath?: string): TreeNode[];
|
|
24
|
+
/**
|
|
25
|
+
* Convert array to TreeNode array
|
|
26
|
+
*/
|
|
27
|
+
private arrayToTree;
|
|
28
|
+
/**
|
|
29
|
+
* Convert object properties to TreeNode array
|
|
30
|
+
*/
|
|
31
|
+
private objectPropertiesToTree;
|
|
32
|
+
/**
|
|
33
|
+
* Create a single TreeNode from a value
|
|
34
|
+
*/
|
|
35
|
+
private createNode;
|
|
36
|
+
/**
|
|
37
|
+
* Try to create a primitive node (boolean, number, string, function)
|
|
38
|
+
*/
|
|
39
|
+
private tryCreatePrimitiveNode;
|
|
40
|
+
/**
|
|
41
|
+
* Create a node for primitive values
|
|
42
|
+
*/
|
|
43
|
+
private createPrimitiveNode;
|
|
44
|
+
/**
|
|
45
|
+
* Create a node for function values
|
|
46
|
+
*/
|
|
47
|
+
private createFunctionNode;
|
|
48
|
+
/**
|
|
49
|
+
* Create a node for array values
|
|
50
|
+
*/
|
|
51
|
+
private createArrayNode;
|
|
52
|
+
/**
|
|
53
|
+
* Create a node for object values
|
|
54
|
+
*/
|
|
55
|
+
private createObjectNode;
|
|
56
|
+
/**
|
|
57
|
+
* Create a node for class instances (non-plain objects)
|
|
58
|
+
*/
|
|
59
|
+
private createClassInstanceNode;
|
|
60
|
+
}
|
|
@@ -1,9 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { COMPUTED_QRL_KEY, QRL_KEY } from '@devtools/kit';
|
|
2
|
+
import type { ParsedStructure, ComponentDevtoolsState, DevtoolsRenderStats } from '@devtools/kit';
|
|
3
|
+
import type { QRLInternal } from './types';
|
|
4
|
+
/**
|
|
5
|
+
* Sequence entry from Qwik's q:seq containing QRL references.
|
|
6
|
+
* Can have either $qrl$ (for tasks) or $computeQrl$ (for computed).
|
|
7
|
+
*/
|
|
8
|
+
interface QSeqEntry {
|
|
9
|
+
[QRL_KEY]?: QRLInternal;
|
|
10
|
+
[COMPUTED_QRL_KEY]?: QRLInternal;
|
|
6
11
|
}
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Filter sequence data to only include user-defined hooks
|
|
14
|
+
* (excludes internal devtools hooks like useCollectHooks)
|
|
15
|
+
*/
|
|
16
|
+
export declare function filterUserDefinedHooks(allSeq: QSeqEntry[]): QSeqEntry[];
|
|
17
|
+
/**
|
|
18
|
+
* Get parsed structure from global devtools state by QRL chunk name
|
|
19
|
+
*/
|
|
20
|
+
export declare function getQwikState(qrlChunkName: string): ParsedStructure[];
|
|
21
|
+
/**
|
|
22
|
+
* Get render stats from global devtools state by QRL chunk name
|
|
23
|
+
*/
|
|
24
|
+
export declare function getRenderStats(qrlChunkName: string): DevtoolsRenderStats | null;
|
|
25
|
+
/**
|
|
26
|
+
* Get all component states from global devtools state
|
|
27
|
+
*/
|
|
28
|
+
export declare function getAllComponentStates(): Record<string, ComponentDevtoolsState>;
|
|
29
|
+
/**
|
|
30
|
+
* Transform QRL sequence data to normalized parsed structure format
|
|
31
|
+
*/
|
|
32
|
+
export declare function transformQrlSequenceData(seqs: QSeqEntry[]): ParsedStructure[];
|
|
33
|
+
export declare const findInnerHook: typeof filterUserDefinedHooks;
|
|
34
|
+
export declare const returnQrlData: typeof transformQrlSequenceData;
|
|
35
|
+
export {};
|