astro-tractstack 2.0.0-rc.46 → 2.0.0-rc.48

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/templates/css/frontend.css +1 -1
  3. package/templates/src/components/search/SearchModal.tsx +122 -47
  4. package/templates/src/components/search/SearchResults.tsx +48 -41
  5. package/templates/src/hooks/useSearch.ts +34 -55
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "astro-tractstack",
3
- "version": "2.0.0-rc.46",
3
+ "version": "2.0.0-rc.48",
4
4
  "description": "Astro integration for TractStack - redeeming the web from boring experiences",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/templates/css/frontend.css CHANGED
@@ -1 +1 @@
1
- /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .sticky{position:sticky} .inset-0{inset:0px} .inset-x-0{left:0px;right:0px} .inset-y-0{top:0px;bottom:0px} .bottom-0{bottom:0px} .bottom-1{bottom:0.25rem} .bottom-24{bottom:6rem} .bottom-4{bottom:1rem} .bottom-full{bottom:100%} .left-0{left:0px} .left-1\/2{left:50%} .left-2{left:0.5rem} .left-3{left:0.75rem} .right-0{right:0px} .right-1{right:0.25rem} .right-2{right:0.5rem} .right-4{right:1rem} .right-8{right:2rem} .top-0{top:0px} .top-1\/2{top:50%} .top-2{top:0.5rem} .top-4{top:1rem} .top-8{top:2rem} .top-full{top:100%} .isolate{isolation:isolate} .isolation-auto{isolation:auto} .z-10{z-index:110} .z-101{z-index:1001} .z-102{z-index:1002} .z-50{z-index:510} .col-span-1{grid-column:span 1 / span 1} .col-span-3{grid-column:span 3 / span 3} .mx-1{margin-left:0.25rem;margin-right:0.25rem} .mx-2{margin-left:0.5rem;margin-right:0.5rem} .mx-4{margin-left:1rem;margin-right:1rem} .mx-5{margin-left:1.25rem;margin-right:1.25rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1{margin-top:0.25rem;margin-bottom:0.25rem} .my-16{margin-top:4rem;margin-bottom:4rem} .my-2{margin-top:0.5rem;margin-bottom:0.5rem} .my-3{margin-top:0.75rem;margin-bottom:0.75rem} .my-4{margin-top:1rem;margin-bottom:1rem} .my-8{margin-top:2rem;margin-bottom:2rem} .mb-1{margin-bottom:0.25rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:0.5rem} .mb-3{margin-bottom:0.75rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .ml-1{margin-left:0.25rem} .ml-2{margin-left:0.5rem} .ml-3{margin-left:0.75rem} .ml-4{margin-left:1rem} .ml-6{margin-left:1.5rem} .ml-auto{margin-left:auto} .mr-1{margin-right:0.25rem} .mr-2{margin-right:0.5rem} .mr-3{margin-right:0.75rem} .mr-4{margin-right:1rem} .mt-1{margin-top:0.25rem} .mt-2{margin-top:0.5rem} .mt-3{margin-top:0.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1} .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .inline-flex{display:inline-flex} .table{display:table} .grid{display:grid} .inline-grid{display:inline-grid} .contents{display:contents} .list-item{display:list-item} .hidden{display:none} .aspect-video{aspect-ratio:16 / 9} .h-1{height:0.25rem} .h-10{height:2.5rem} .h-12{height:3rem} .h-14{height:3.5rem} .h-16{height:4rem} .h-2{height:0.5rem} .h-3{height:0.75rem} .h-32{height:8rem} .h-4{height:1rem} .h-48{height:12rem} .h-5{height:1.25rem} .h-6{height:1.5rem} .h-64{height:16rem} .h-8{height:2rem} .h-9{height:2.25rem} .h-96{height:24rem} .h-auto{height:auto} .h-fit{height:fit-content} .h-full{height:100%} .max-h-32{max-height:8rem} .max-h-40{max-height:10rem} .max-h-56{max-height:14rem} .max-h-60{max-height:15rem} .max-h-64{max-height:16rem} .max-h-96{max-height:24rem} .max-h-screen{max-height:100vh} .min-h-16{min-height:4rem} .min-h-9{min-height:2.25rem} .min-h-full{min-height:100%} .min-h-screen{min-height:100vh} .w-1\/2{width:50%} .w-1\/3{width:33.333333%} .w-10{width:2.5rem} .w-11{width:2.75rem} .w-12{width:3rem} .w-16{width:4rem} .w-2{width:0.5rem} .w-2\/3{width:66.666667%} .w-20{width:5rem} .w-24{width:6rem} .w-3{width:0.75rem} .w-4{width:1rem} .w-40{width:10rem} .w-5{width:1.25rem} .w-6{width:1.5rem} .w-64{width:16rem} .w-8{width:2rem} .w-9{width:2.25rem} .w-96{width:24rem} .w-auto{width:auto} .w-fit{width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0px} .min-w-24{min-width:6rem} .min-w-48{min-width:12rem} .min-w-64{min-width:16rem} .min-w-full{min-width:100%} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-48{max-width:12rem} .max-w-4xl{max-width:56rem} .max-w-7xl{max-width:80rem} .max-w-full{max-width:100%} .max-w-lg{max-width:32rem} .max-w-md{max-width:28rem} .max-w-none{max-width:none} .max-w-xl{max-width:36rem} .flex-1{flex:1 1 0%} .flex-auto{flex:1 1 auto} .flex-shrink-0{flex-shrink:0} .shrink-0{flex-shrink:0} .flex-grow{flex-grow:1} .translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-5{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-6{--tw-translate-x:1.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-y-full{--tw-translate-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .scale-x-0{--tw-scale-x:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} @keyframes fadeIn{0%{opacity:.25}100%{opacity:1}} .animate-fadeIn{animation:fadeIn 1s ease-in} @keyframes pulse{50%{opacity:.5}} .animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite} @keyframes spin{to{transform:rotate(360deg)}} .animate-spin{animation:spin 1s linear infinite} .cursor-default{cursor:default} .cursor-help{cursor:help} .cursor-move{cursor:move} .cursor-not-allowed{cursor:not-allowed} .cursor-pointer{cursor:pointer} .select-none{user-select:none} .resize-y{resize:vertical} .resize{resize:both} .list-inside{list-style-position:inside} .list-disc{list-style-type:disc} .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))} .grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))} .grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))} .flex-row{flex-direction:row} .flex-row-reverse{flex-direction:row-reverse} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .flex-nowrap{flex-wrap:nowrap} .items-start{align-items:flex-start} .items-end{align-items:flex-end} .items-center{align-items:center} .justify-start{justify-content:flex-start} .justify-end{justify-content:flex-end} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-around{justify-content:space-around} .gap-1{gap:0.25rem} .gap-2{gap:0.5rem} .gap-3{gap:0.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem} .gap-x-2{column-gap:0.5rem} .gap-x-4{column-gap:1rem} .gap-x-6{column-gap:1.5rem} .gap-x-8{column-gap:2rem} .gap-y-1{row-gap:0.25rem} .gap-y-2{row-gap:0.5rem} .gap-y-3{row-gap:0.75rem} .space-x-1 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))} .space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))} .space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))} .space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))} .space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))} .space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))} .space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))} .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))} .divide-gray-100 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246 / var(--tw-divide-opacity))} .divide-gray-200 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235 / var(--tw-divide-opacity))} .divide-gray-300 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(209 213 219 / var(--tw-divide-opacity))} .justify-self-start{justify-self:start} .overflow-auto{overflow:auto} .overflow-hidden{overflow:hidden} .overflow-x-auto{overflow-x:auto} .overflow-y-auto{overflow-y:auto} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .text-ellipsis{text-overflow:ellipsis} .text-clip{text-overflow:clip} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .text-pretty{text-wrap:pretty} .break-all{word-break:break-all} .rounded{border-radius:0.25rem} .rounded-3xl{border-radius:1.5rem} .rounded-full{border-radius:9999px} .rounded-lg{border-radius:0.5rem} .rounded-md{border-radius:0.375rem} .rounded-sm{border-radius:0.125rem} .rounded-xl{border-radius:0.75rem} .rounded-b-md{border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem} .rounded-l-md{border-top-left-radius:0.375rem;border-bottom-left-radius:0.375rem} .rounded-r-md{border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem} .rounded-t-md{border-top-left-radius:0.375rem;border-top-right-radius:0.375rem} .border{border-width:1px} .border-0{border-width:0px} .border-2{border-width:2px} .border-4{border-width:4px} .border-b{border-bottom-width:1px} .border-b-2{border-bottom-width:2px} .border-l-2{border-left-width:2px} .border-t{border-top-width:1px} .border-t-2{border-top-width:2px} .border-solid{border-style:solid} .border-dashed{border-style:dashed} .border-dotted{border-style:dotted} .border-none{border-style:none} .border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138 / var(--tw-border-opacity))} .border-amber-300{--tw-border-opacity:1;border-color:rgb(252 211 77 / var(--tw-border-opacity))} .border-black\/10{border-color:rgb(0 0 0 / 0.1)} .border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254 / var(--tw-border-opacity))} .border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))} .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))} .border-cyan-200{--tw-border-opacity:1;border-color:rgb(165 243 252 / var(--tw-border-opacity))} .border-cyan-400{--tw-border-opacity:1;border-color:rgb(34 211 238 / var(--tw-border-opacity))} .border-cyan-500{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .border-cyan-600{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))} .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))} .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))} .border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))} .border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208 / var(--tw-border-opacity))} .border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity))} .border-myblue{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .border-myblue\/20{border-color:rgb(41 63 88 / 0.2)} .border-mydarkgrey{--tw-border-opacity:1;border-color:rgb(57 61 52 / var(--tw-border-opacity))} .border-mydarkgrey\/20{border-color:rgb(57 61 52 / 0.2)} .border-mydarkgrey\/30{border-color:rgb(57 61 52 / 0.3)} .border-mylightgrey{--tw-border-opacity:1;border-color:rgb(167 177 183 / var(--tw-border-opacity))} .border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170 / var(--tw-border-opacity))} .border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity))} .border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165 / var(--tw-border-opacity))} .border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))} .border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249 / var(--tw-border-opacity))} .border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity))} .border-transparent{border-color:transparent} .border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))} .border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138 / var(--tw-border-opacity))} .border-r-transparent{border-right-color:transparent} .border-t-cyan-600{--tw-border-opacity:1;border-top-color:rgb(8 145 178 / var(--tw-border-opacity))} .border-t-gray-600{--tw-border-opacity:1;border-top-color:rgb(75 85 99 / var(--tw-border-opacity))} .border-t-gray-900{--tw-border-opacity:1;border-top-color:rgb(17 24 39 / var(--tw-border-opacity))} .border-t-red-600{--tw-border-opacity:1;border-top-color:rgb(220 38 38 / var(--tw-border-opacity))} .border-t-transparent{border-top-color:transparent} .bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199 / var(--tw-bg-opacity))} .bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))} .bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235 / var(--tw-bg-opacity))} .bg-amber-600{--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))} .bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))} .bg-black\/10{background-color:rgb(0 0 0 / 0.1)} .bg-black\/70{background-color:rgb(0 0 0 / 0.7)} .bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))} .bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))} .bg-brand-1{background-color:var(--brand-1)} .bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254 / var(--tw-bg-opacity))} .bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))} .bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178 / var(--tw-bg-opacity))} .bg-cyan-600\/10{background-color:rgb(8 145 178 / 0.1)} .bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))} .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))} .bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))} .bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))} .bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))} .bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))} .bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244 / var(--tw-bg-opacity))} .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))} .bg-lime-400{--tw-bg-opacity:1;background-color:rgb(163 230 53 / var(--tw-bg-opacity))} .bg-myblue{--tw-bg-opacity:1;background-color:rgb(41 63 88 / var(--tw-bg-opacity))} .bg-myblue\/20{background-color:rgb(41 63 88 / 0.2)} .bg-mydarkgrey{--tw-bg-opacity:1;background-color:rgb(57 61 52 / var(--tw-bg-opacity))} .bg-mylightgrey{--tw-bg-opacity:1;background-color:rgb(167 177 183 / var(--tw-bg-opacity))} .bg-myoffwhite{--tw-bg-opacity:1;background-color:rgb(227 227 227 / var(--tw-bg-opacity))} .bg-myorange{--tw-bg-opacity:1;background-color:rgb(245 131 51 / var(--tw-bg-opacity))} .bg-mywhite{--tw-bg-opacity:1;background-color:rgb(252 252 252 / var(--tw-bg-opacity))} .bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))} .bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237 / var(--tw-bg-opacity))} .bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))} .bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12 / var(--tw-bg-opacity))} .bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))} .bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))} .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))} .bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))} .bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))} .bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))} .bg-teal-400{--tw-bg-opacity:1;background-color:rgb(45 212 191 / var(--tw-bg-opacity))} .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))} .bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))} .bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232 / var(--tw-bg-opacity))} .bg-opacity-0{--tw-bg-opacity:0} .bg-opacity-20{--tw-bg-opacity:0.2} .bg-opacity-50{--tw-bg-opacity:0.5} .bg-opacity-75{--tw-bg-opacity:0.75} .bg-opacity-80{--tw-bg-opacity:0.8} .bg-opacity-90{--tw-bg-opacity:0.9} .bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))} .from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)} .to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)} .object-contain{object-fit:contain} .object-cover{object-fit:cover} .p-0{padding:0px} .p-1{padding:0.25rem} .p-2{padding:0.5rem} .p-3{padding:0.75rem} .p-4{padding:1rem} .p-6{padding:1.5rem} .p-8{padding:2rem} .px-1{padding-left:0.25rem;padding-right:0.25rem} .px-12{padding-left:3rem;padding-right:3rem} .px-2{padding-left:0.5rem;padding-right:0.5rem} .px-3{padding-left:0.75rem;padding-right:0.75rem} .px-4{padding-left:1rem;padding-right:1rem} .px-5{padding-left:1.25rem;padding-right:1.25rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .px-8{padding-left:2rem;padding-right:2rem} .px-9{padding-left:2.25rem;padding-right:2.25rem} .py-1{padding-top:0.25rem;padding-bottom:0.25rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3rem;padding-bottom:3rem} .py-2{padding-top:0.5rem;padding-bottom:0.5rem} .py-24{padding-top:6rem;padding-bottom:6rem} .py-3{padding-top:0.75rem;padding-bottom:0.75rem} .py-4{padding-top:1rem;padding-bottom:1rem} .py-5{padding-top:1.25rem;padding-bottom:1.25rem} .py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2rem;padding-bottom:2rem} .pb-2{padding-bottom:0.5rem} .pb-3{padding-bottom:0.75rem} .pb-4{padding-bottom:1rem} .pb-6{padding-bottom:1.5rem} .pl-10{padding-left:2.5rem} .pl-12{padding-left:3rem} .pl-2{padding-left:0.5rem} .pl-3{padding-left:0.75rem} .pl-5{padding-left:1.25rem} .pl-6{padding-left:1.5rem} .pr-0{padding-right:0px} .pr-10{padding-right:2.5rem} .pr-12{padding-right:3rem} .pr-16{padding-right:4rem} .pr-2{padding-right:0.5rem} .pr-3{padding-right:0.75rem} .pr-4{padding-right:1rem} .pr-8{padding-right:2rem} .pr-9{padding-right:2.25rem} .pt-12{padding-top:3rem} .pt-2{padding-top:0.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-8{padding-top:2rem} .text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right} .font-action{font-family:var(--font-action), Inter, Georgia, Times New Roman, Times, serif} .font-main{font-family:var(--font-main), Inter, Arial, Helvetica Neue, Helvetica, sans-serif} .font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace} .font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"} .text-2xl{font-size:1.5rem} .text-3xl{font-size:1.875rem} .text-base{font-size:1rem} .text-lg{font-size:1.125rem} .text-sm{font-size:0.875rem} .text-xl{font-size:1.25rem} .text-xs{font-size:0.75rem} .font-bold{font-weight:700} .font-medium{font-weight:500} .font-normal{font-weight:400} .font-semibold{font-weight:600} .uppercase{text-transform:uppercase} .lowercase{text-transform:lowercase} .capitalize{text-transform:capitalize} .normal-case{text-transform:none} .italic{font-style:italic} .not-italic{font-style:normal} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-9{line-height:2.25rem} .leading-none{line-height:1} .leading-relaxed{line-height:1.625} .tracking-tight{letter-spacing:-0.025em} .tracking-wide{letter-spacing:0.025em} .tracking-wider{letter-spacing:0.05em} .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity))} .text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11 / var(--tw-text-opacity))} .text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity))} .text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9 / var(--tw-text-opacity))} .text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14 / var(--tw-text-opacity))} .text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .text-black\/20{color:rgb(0 0 0 / 0.2)} .text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity))} .text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))} .text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))} .text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity))} .text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity))} .text-cyan-500{--tw-text-opacity:1;color:rgb(6 182 212 / var(--tw-text-opacity))} .text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178 / var(--tw-text-opacity))} .text-cyan-700{--tw-text-opacity:1;color:rgb(14 116 144 / var(--tw-text-opacity))} .text-cyan-800{--tw-text-opacity:1;color:rgb(21 94 117 / var(--tw-text-opacity))} .text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))} .text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))} .text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))} .text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))} .text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity))} .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))} .text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity))} .text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity))} .text-green-800{--tw-text-opacity:1;color:rgb(22 101 52 / var(--tw-text-opacity))} .text-myblack{--tw-text-opacity:1;color:rgb(16 18 13 / var(--tw-text-opacity))} .text-myblue{--tw-text-opacity:1;color:rgb(41 63 88 / var(--tw-text-opacity))} .text-myblue\/80{color:rgb(41 63 88 / 0.8)} .text-mydarkgrey{--tw-text-opacity:1;color:rgb(57 61 52 / var(--tw-text-opacity))} .text-mylightgrey{--tw-text-opacity:1;color:rgb(167 177 183 / var(--tw-text-opacity))} .text-myorange{--tw-text-opacity:1;color:rgb(245 131 51 / var(--tw-text-opacity))} .text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60 / var(--tw-text-opacity))} .text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22 / var(--tw-text-opacity))} .text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))} .text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12 / var(--tw-text-opacity))} .text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18 / var(--tw-text-opacity))} .text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))} .text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))} .text-red-600{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))} .text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))} .text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7 / var(--tw-text-opacity))} .text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14 / var(--tw-text-opacity))} .underline{text-decoration-line:underline} .overline{text-decoration-line:overline} .line-through{text-decoration-line:line-through} .no-underline{text-decoration-line:none} .underline-offset-4{text-underline-offset:4px} .placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))} .placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))} .opacity-0{opacity:0} .opacity-100{opacity:1} .opacity-25{opacity:0.25} .opacity-50{opacity:0.5} .opacity-60{opacity:0.6} .opacity-75{opacity:0.75} .mix-blend-difference{mix-blend-mode:difference} .shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .outline{outline-style:solid} .outline-dashed{outline-style:dashed} .outline-dotted{outline-style:dotted} .outline-2{outline-width:2px} .outline-4{outline-width:4px} .outline-offset-2{outline-offset:2px} .outline-cyan-500{outline-color:#06b6d4} .outline-cyan-600{outline-color:#0891b2} .outline-red-700{outline-color:#b91c1c} .ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-inset{--tw-ring-inset:inset} .ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))} .ring-black\/5{--tw-ring-color:rgb(0 0 0 / 0.05)} .ring-cyan-600{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .ring-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219 / var(--tw-ring-opacity))} .ring-mydarkgrey\/5{--tw-ring-color:rgb(57 61 52 / 0.05)} .ring-mygreen{--tw-ring-opacity:1;--tw-ring-color:rgb(200 223 140 / var(--tw-ring-opacity))} .ring-mylightgrey{--tw-ring-opacity:1;--tw-ring-color:rgb(167 177 183 / var(--tw-ring-opacity))} .ring-orange-500{--tw-ring-opacity:1;--tw-ring-color:rgb(249 115 22 / var(--tw-ring-opacity))} .ring-red-300{--tw-ring-opacity:1;--tw-ring-color:rgb(252 165 165 / var(--tw-ring-opacity))} .ring-opacity-5{--tw-ring-opacity:0.05} .blur{--tw-blur:blur(8px);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)} .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));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)} .grayscale{--tw-grayscale:grayscale(100%);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)} .invert{--tw-invert:invert(100%);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)} .sepia{--tw-sepia:sepia(100%);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)} .filter{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)} .backdrop-blur{--tw-backdrop-blur:blur(8px);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)} .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);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)} .backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);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)} .backdrop-invert{--tw-backdrop-invert:invert(100%);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)} .backdrop-sepia{--tw-backdrop-sepia:sepia(100%);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)} .transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .duration-150{transition-duration:150ms} .duration-200{transition-duration:200ms} .duration-300{transition-duration:300ms} .ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)} .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} .ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .placeholder\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .placeholder\:text-mydarkgrey::placeholder{--tw-text-opacity:1;color:rgb(57 61 52 / var(--tw-text-opacity))} .placeholder\:text-mylightgrey::placeholder{--tw-text-opacity:1;color:rgb(167 177 183 / var(--tw-text-opacity))} .before\:pointer-events-none::before{content:var(--tw-content);pointer-events:none} .before\:absolute::before{content:var(--tw-content);position:absolute} .before\:inset-0::before{content:var(--tw-content);inset:0px} .before\:opacity-50::before{content:var(--tw-content);opacity:0.5} .before\:outline-dashed::before{content:var(--tw-content);outline-style:dashed} .before\:outline-4::before{content:var(--tw-content);outline-width:4px} .before\:outline-red-700::before{content:var(--tw-content);outline-color:#b91c1c} .last\:border-b-0:last-child{border-bottom-width:0px} .focus-within\:border-myblue:focus-within{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .focus-within\:ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus-within\:ring-myblue:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(41 63 88 / var(--tw-ring-opacity))} .hover\:rotate-1:hover{--tw-rotate:1deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rotate-3:hover{--tw-rotate:3deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rotate-6:hover{--tw-rotate:6deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rounded:hover{border-radius:0.25rem} .hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))} .hover\:border-cyan-100:hover{--tw-border-opacity:1;border-color:rgb(207 250 254 / var(--tw-border-opacity))} .hover\:border-cyan-400:hover{--tw-border-opacity:1;border-color:rgb(34 211 238 / var(--tw-border-opacity))} .hover\:border-cyan-500:hover{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .hover\:border-cyan-600:hover{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .hover\:border-cyan-700:hover{--tw-border-opacity:1;border-color:rgb(14 116 144 / var(--tw-border-opacity))} .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))} .hover\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235 / var(--tw-bg-opacity))} .hover\:bg-amber-700:hover{--tw-bg-opacity:1;background-color:rgb(180 83 9 / var(--tw-bg-opacity))} .hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))} .hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))} .hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))} .hover\:bg-brand-3:hover{background-color:var(--brand-3)} .hover\:bg-cyan-100:hover{--tw-bg-opacity:1;background-color:rgb(207 250 254 / var(--tw-bg-opacity))} .hover\:bg-cyan-200:hover{--tw-bg-opacity:1;background-color:rgb(165 243 252 / var(--tw-bg-opacity))} .hover\:bg-cyan-50:hover{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))} .hover\:bg-cyan-50\/20:hover{background-color:rgb(236 254 255 / 0.2)} .hover\:bg-cyan-500:hover{--tw-bg-opacity:1;background-color:rgb(6 182 212 / var(--tw-bg-opacity))} .hover\:bg-cyan-600:hover{--tw-bg-opacity:1;background-color:rgb(8 145 178 / var(--tw-bg-opacity))} .hover\:bg-cyan-600\/20:hover{background-color:rgb(8 145 178 / 0.2)} .hover\:bg-cyan-700:hover{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .hover\:bg-cyan-800:hover{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))} .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))} .hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))} .hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))} .hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))} .hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))} .hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))} .hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(187 247 208 / var(--tw-bg-opacity))} .hover\:bg-myblack:hover{--tw-bg-opacity:1;background-color:rgb(16 18 13 / var(--tw-bg-opacity))} .hover\:bg-myblue\/10:hover{background-color:rgb(41 63 88 / 0.1)} .hover\:bg-mydarkgrey\/10:hover{background-color:rgb(57 61 52 / 0.1)} .hover\:bg-mygreen\/20:hover{background-color:rgb(200 223 140 / 0.2)} .hover\:bg-mylightgrey:hover{--tw-bg-opacity:1;background-color:rgb(167 177 183 / var(--tw-bg-opacity))} .hover\:bg-myorange:hover{--tw-bg-opacity:1;background-color:rgb(245 131 51 / var(--tw-bg-opacity))} .hover\:bg-orange-100:hover{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))} .hover\:bg-orange-200:hover{--tw-bg-opacity:1;background-color:rgb(254 215 170 / var(--tw-bg-opacity))} .hover\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))} .hover\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12 / var(--tw-bg-opacity))} .hover\:bg-red-200:hover{--tw-bg-opacity:1;background-color:rgb(254 202 202 / var(--tw-bg-opacity))} .hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))} .hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))} .hover\:bg-white\/50:hover{background-color:rgb(255 255 255 / 0.5)} .hover\:bg-opacity-100:hover{--tw-bg-opacity:1} .hover\:bg-opacity-20:hover{--tw-bg-opacity:0.2} .hover\:font-bold:hover{font-weight:700} .hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))} .hover\:text-cyan-600:hover{--tw-text-opacity:1;color:rgb(8 145 178 / var(--tw-text-opacity))} .hover\:text-cyan-700:hover{--tw-text-opacity:1;color:rgb(14 116 144 / var(--tw-text-opacity))} .hover\:text-cyan-800:hover{--tw-text-opacity:1;color:rgb(21 94 117 / var(--tw-text-opacity))} .hover\:text-cyan-900:hover{--tw-text-opacity:1;color:rgb(22 78 99 / var(--tw-text-opacity))} .hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))} .hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))} .hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))} .hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))} .hover\:text-myblack:hover{--tw-text-opacity:1;color:rgb(16 18 13 / var(--tw-text-opacity))} .hover\:text-myblue:hover{--tw-text-opacity:1;color:rgb(41 63 88 / var(--tw-text-opacity))} .hover\:text-myorange:hover{--tw-text-opacity:1;color:rgb(245 131 51 / var(--tw-text-opacity))} .hover\:text-orange-600:hover{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))} .hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))} .hover\:text-red-800:hover{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))} .hover\:text-red-900:hover{--tw-text-opacity:1;color:rgb(127 29 29 / var(--tw-text-opacity))} .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .hover\:underline:hover{text-decoration-line:underline} .hover\:decoration-dashed:hover{text-decoration-style:dashed} .hover\:decoration-4:hover{text-decoration-thickness:4px} .hover\:underline-offset-4:hover{text-underline-offset:4px} .hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .hover\:outline:hover{outline-style:solid} .hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .hover\:ring-cyan-600:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .hover\:before\:bg-red-600\/50:hover::before{content:var(--tw-content);background-color:rgb(220 38 38 / 0.5)} .hover\:before\:opacity-100:hover::before{content:var(--tw-content);opacity:1} .focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))} .focus\:border-cyan-500:focus{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .focus\:border-cyan-600:focus{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .focus\:border-cyan-700:focus{--tw-border-opacity:1;border-color:rgb(14 116 144 / var(--tw-border-opacity))} .focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))} .focus\:border-myblue:focus{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))} .focus\:bg-brand-7:focus{background-color:var(--brand-7)} .focus\:bg-cyan-700:focus{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .focus\:text-black:focus{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .focus\:text-gray-600:focus{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .focus\:text-red-600:focus{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .focus\:underline:focus{text-decoration-line:underline} .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px} .focus\:outline-offset-0:focus{outline-offset:0px} .focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-inset:focus{--tw-ring-inset:inset} .focus\:ring-amber-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 158 11 / var(--tw-ring-opacity))} .focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))} .focus\:ring-brand-1:focus{--tw-ring-color:var(--brand-1)} .focus\:ring-cyan-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212 / var(--tw-ring-opacity))} .focus\:ring-cyan-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .focus\:ring-cyan-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 116 144 / var(--tw-ring-opacity))} .focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity))} .focus\:ring-myblue:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(41 63 88 / var(--tw-ring-opacity))} .focus\:ring-myorange:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 131 51 / var(--tw-ring-opacity))} .focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity))} .focus\:ring-offset-2:focus{--tw-ring-offset-width:2px} .focus\:before\:bg-red-600\/50:focus::before{content:var(--tw-content);background-color:rgb(220 38 38 / 0.5)} .focus\:before\:opacity-100:focus::before{content:var(--tw-content);opacity:1} .focus-visible\:outline:focus-visible{outline-style:solid} .focus-visible\:outline-2:focus-visible{outline-width:2px} .focus-visible\:outline-offset-2:focus-visible{outline-offset:2px} .focus-visible\:outline-cyan-600:focus-visible{outline-color:#0891b2} .focus-visible\:outline-myorange:focus-visible{outline-color:#f58333} .disabled\:cursor-not-allowed:disabled{cursor:not-allowed} .disabled\:text-gray-400:disabled{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .disabled\:opacity-50:disabled{opacity:0.5} .disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent} .group:focus-within .group-focus-within\:bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .group:focus-within .group-focus-within\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .group:focus-within .group-focus-within\:opacity-100{opacity:1} .group:hover .group-hover\:visible{visibility:visible} .group:hover .group-hover\:bg-cyan-200{--tw-bg-opacity:1;background-color:rgb(165 243 252 / var(--tw-bg-opacity))} .group:hover .group-hover\:bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .group:hover .group-hover\:bg-slate-200\/20{background-color:rgb(226 232 240 / 0.2)} .group:hover .group-hover\:bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))} .group:hover .group-hover\:text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .group:hover .group-hover\:opacity-100{opacity:1} @media (prefers-reduced-motion: no-preference){@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.motion-safe\:animate-bounce{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.motion-safe\:animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes wiggle{0%, 100%{transform:translateX(3%)}50%{transform:translateX(0)}}.motion-safe\:animate-wig{animation:wiggle 1s ease-in-out infinite}.motion-safe\:scroll-smooth{scroll-behavior:smooth}} @media (min-width: 0px){.xs\:flex{display:flex}.xs\:hidden{display:none}.xs\:flex-row{flex-direction:row}.xs\:items-start{align-items:flex-start}.xs\:justify-between{justify-content:space-between}.xs\:text-sm{font-size:0.875rem}.xs\:leading-6{line-height:1.5rem}} @media (min-width: 801px){.md\:static{position:static}.md\:fixed{position:fixed}.md\:sticky{position:sticky}.md\:bottom-0{bottom:0px}.md\:bottom-auto{bottom:auto}.md\:left-0{left:0px}.md\:top-24{top:6rem}.md\:col-span-1{grid-column:span 1 / span 1}.md\:col-span-2{grid-column:span 2 / span 2}.md\:col-span-3{grid-column:span 3 / span 3}.md\:mx-10{margin-left:2.5rem;margin-right:2.5rem}.md\:mb-10{margin-bottom:2.5rem}.md\:ml-16{margin-left:4rem}.md\:mt-0{margin-top:0px}.md\:block{display:block}.md\:flex{display:flex}.md\:table-cell{display:table-cell}.md\:hidden{display:none}.md\:h-8{height:2rem}.md\:h-screen{height:100vh}.md\:w-1\/2{width:50%}.md\:w-16{width:4rem}.md\:w-2\/5{width:40%}.md\:w-3\/5{width:60%}.md\:max-w-72{max-width:18rem}.md\:flex-1{flex:1 1 0%}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-10{gap:2.5rem}.md\:gap-2{gap:0.5rem}.md\:gap-4{gap:1rem}.md\:gap-8{gap:2rem}.md\:space-x-0 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0px * var(--tw-space-x-reverse));margin-left:calc(0px * calc(1 - var(--tw-space-x-reverse)))}.md\:space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.md\:space-y-0 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.md\:space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.md\:rounded-lg{border-radius:0.5rem}.md\:border-l-2{border-left-width:2px}.md\:border-t-0{border-top-width:0px}.md\:p-8{padding:2rem}.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-2{padding-top:0.5rem;padding-bottom:0.5rem}.md\:pt-0{padding-top:0px}.md\:text-3xl{font-size:1.875rem}} @media (min-width: 1367px){.xl\:block{display:block}.xl\:table-cell{display:table-cell}.xl\:hidden{display:none}.xl\:max-w-screen-xl{max-width:1367px}.xl\:gap-12{gap:3rem}.xl\:px-32{padding-left:8rem;padding-right:8rem}.xl\:px-6{padding-left:1.5rem;padding-right:1.5rem}} @media (prefers-color-scheme: dark){.dark\:border-cyan-600{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))}.dark\:bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))}.dark\:bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99 / var(--tw-bg-opacity))}.dark\:text-cyan-300{--tw-text-opacity:1;color:rgb(103 232 249 / var(--tw-text-opacity))}.dark\:hover\:bg-cyan-800:hover{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))}.group:hover .dark\:group-hover\:bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))}}
1
+ /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0} .pointer-events-none{pointer-events:none} .pointer-events-auto{pointer-events:auto} .visible{visibility:visible} .invisible{visibility:hidden} .collapse{visibility:collapse} .static{position:static} .fixed{position:fixed} .absolute{position:absolute} .relative{position:relative} .sticky{position:sticky} .inset-0{inset:0px} .inset-y-0{top:0px;bottom:0px} .-right-1{right:-0.25rem} .-top-1{top:-0.25rem} .bottom-0{bottom:0px} .bottom-1{bottom:0.25rem} .bottom-16{bottom:4rem} .bottom-4{bottom:1rem} .bottom-full{bottom:100%} .left-0{left:0px} .left-1\/2{left:50%} .left-2{left:0.5rem} .left-3{left:0.75rem} .right-0{right:0px} .right-1{right:0.25rem} .right-2{right:0.5rem} .right-4{right:1rem} .right-8{right:2rem} .top-0{top:0px} .top-1\/2{top:50%} .top-2{top:0.5rem} .top-4{top:1rem} .top-6{top:1.5rem} .top-8{top:2rem} .top-full{top:100%} .isolate{isolation:isolate} .isolation-auto{isolation:auto} .z-10{z-index:110} .z-101{z-index:1001} .z-102{z-index:1002} .z-50{z-index:510} .col-span-1{grid-column:span 1 / span 1} .col-span-3{grid-column:span 3 / span 3} .mx-1{margin-left:0.25rem;margin-right:0.25rem} .mx-2{margin-left:0.5rem;margin-right:0.5rem} .mx-4{margin-left:1rem;margin-right:1rem} .mx-5{margin-left:1.25rem;margin-right:1.25rem} .mx-auto{margin-left:auto;margin-right:auto} .my-1{margin-top:0.25rem;margin-bottom:0.25rem} .my-16{margin-top:4rem;margin-bottom:4rem} .my-2{margin-top:0.5rem;margin-bottom:0.5rem} .my-3{margin-top:0.75rem;margin-bottom:0.75rem} .my-4{margin-top:1rem;margin-bottom:1rem} .my-8{margin-top:2rem;margin-bottom:2rem} .-mb-px{margin-bottom:-1px} .-ml-1{margin-left:-0.25rem} .mb-1{margin-bottom:0.25rem} .mb-12{margin-bottom:3rem} .mb-2{margin-bottom:0.5rem} .mb-3{margin-bottom:0.75rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem} .ml-1{margin-left:0.25rem} .ml-2{margin-left:0.5rem} .ml-3{margin-left:0.75rem} .ml-4{margin-left:1rem} .ml-6{margin-left:1.5rem} .ml-auto{margin-left:auto} .mr-1{margin-right:0.25rem} .mr-2{margin-right:0.5rem} .mr-3{margin-right:0.75rem} .mr-4{margin-right:1rem} .mr-6{margin-right:1.5rem} .mt-1{margin-top:0.25rem} .mt-2{margin-top:0.5rem} .mt-3{margin-top:0.75rem} .mt-4{margin-top:1rem} .mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1} .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .block{display:block} .inline-block{display:inline-block} .inline{display:inline} .flex{display:flex} .inline-flex{display:inline-flex} .table{display:table} .grid{display:grid} .inline-grid{display:inline-grid} .contents{display:contents} .list-item{display:list-item} .hidden{display:none} .aspect-video{aspect-ratio:16 / 9} .h-1{height:0.25rem} .h-10{height:2.5rem} .h-12{height:3rem} .h-14{height:3.5rem} .h-16{height:4rem} .h-2{height:0.5rem} .h-3{height:0.75rem} .h-32{height:8rem} .h-4{height:1rem} .h-48{height:12rem} .h-5{height:1.25rem} .h-6{height:1.5rem} .h-64{height:16rem} .h-8{height:2rem} .h-9{height:2.25rem} .h-96{height:24rem} .h-auto{height:auto} .h-fit{height:fit-content} .h-full{height:100%} .max-h-32{max-height:8rem} .max-h-40{max-height:10rem} .max-h-56{max-height:14rem} .max-h-60{max-height:15rem} .max-h-64{max-height:16rem} .max-h-96{max-height:24rem} .max-h-full{max-height:100%} .min-h-0{min-height:0px} .min-h-16{min-height:4rem} .min-h-9{min-height:2.25rem} .min-h-full{min-height:100%} .min-h-screen{min-height:100vh} .w-1\/2{width:50%} .w-1\/3{width:33.333333%} .w-10{width:2.5rem} .w-11{width:2.75rem} .w-12{width:3rem} .w-16{width:4rem} .w-2{width:0.5rem} .w-2\/3{width:66.666667%} .w-20{width:5rem} .w-24{width:6rem} .w-3{width:0.75rem} .w-4{width:1rem} .w-40{width:10rem} .w-5{width:1.25rem} .w-6{width:1.5rem} .w-64{width:16rem} .w-8{width:2rem} .w-9{width:2.25rem} .w-96{width:24rem} .w-auto{width:auto} .w-fit{width:fit-content} .w-full{width:100%} .w-screen{width:100vw} .min-w-0{min-width:0px} .min-w-24{min-width:6rem} .min-w-48{min-width:12rem} .min-w-64{min-width:16rem} .min-w-full{min-width:100%} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-48{max-width:12rem} .max-w-4xl{max-width:56rem} .max-w-5xl{max-width:64rem} .max-w-7xl{max-width:80rem} .max-w-full{max-width:100%} .max-w-lg{max-width:32rem} .max-w-md{max-width:28rem} .max-w-none{max-width:none} .max-w-sm{max-width:24rem} .max-w-xl{max-width:36rem} .flex-1{flex:1 1 0%} .flex-auto{flex:1 1 auto} .flex-shrink-0{flex-shrink:0} .shrink-0{flex-shrink:0} .flex-grow{flex-grow:1} .-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-1{--tw-translate-x:0.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-5{--tw-translate-x:1.25rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-x-6{--tw-translate-x:1.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-y-0{--tw-translate-y:0px;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .translate-y-full{--tw-translate-y:100%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .-rotate-2{--tw-rotate:-2deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .scale-125{--tw-scale-x:1.25;--tw-scale-y:1.25;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .scale-x-0{--tw-scale-x:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} @keyframes fadeIn{0%{opacity:.25}100%{opacity:1}} .animate-fadeIn{animation:fadeIn 1s ease-in} @keyframes pulse{50%{opacity:.5}} .animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite} @keyframes spin{to{transform:rotate(360deg)}} .animate-spin{animation:spin 1s linear infinite} .cursor-default{cursor:default} .cursor-help{cursor:help} .cursor-move{cursor:move} .cursor-not-allowed{cursor:not-allowed} .cursor-pointer{cursor:pointer} .select-none{user-select:none} .resize-y{resize:vertical} .resize{resize:both} .list-inside{list-style-position:inside} .list-disc{list-style-type:disc} .grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))} .grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))} .grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))} .flex-row{flex-direction:row} .flex-row-reverse{flex-direction:row-reverse} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .flex-nowrap{flex-wrap:nowrap} .items-start{align-items:flex-start} .items-end{align-items:flex-end} .items-center{align-items:center} .justify-start{justify-content:flex-start} .justify-end{justify-content:flex-end} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-around{justify-content:space-around} .gap-1{gap:0.25rem} .gap-2{gap:0.5rem} .gap-3{gap:0.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem} .gap-x-2{column-gap:0.5rem} .gap-x-4{column-gap:1rem} .gap-x-6{column-gap:1.5rem} .gap-x-8{column-gap:2rem} .gap-y-1{row-gap:0.25rem} .gap-y-2{row-gap:0.5rem} .gap-y-3{row-gap:0.75rem} .-space-x-px > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-1px * var(--tw-space-x-reverse));margin-left:calc(-1px * calc(1 - var(--tw-space-x-reverse)))} .space-x-1 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.25rem * var(--tw-space-x-reverse));margin-left:calc(0.25rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-3 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.75rem * var(--tw-space-x-reverse));margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))} .space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))} .space-y-1 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))} .space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))} .space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))} .space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))} .space-y-6 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))} .space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))} .divide-y > :not([hidden]) ~ :not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))} .divide-gray-100 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246 / var(--tw-divide-opacity))} .divide-gray-200 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235 / var(--tw-divide-opacity))} .divide-gray-300 > :not([hidden]) ~ :not([hidden]){--tw-divide-opacity:1;border-color:rgb(209 213 219 / var(--tw-divide-opacity))} .justify-self-start{justify-self:start} .overflow-auto{overflow:auto} .overflow-hidden{overflow:hidden} .overflow-visible{overflow:visible} .overflow-x-auto{overflow-x:auto} .overflow-y-auto{overflow-y:auto} .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .text-ellipsis{text-overflow:ellipsis} .text-clip{text-overflow:clip} .whitespace-normal{white-space:normal} .whitespace-nowrap{white-space:nowrap} .text-balance{text-wrap:balance} .text-pretty{text-wrap:pretty} .break-all{word-break:break-all} .rounded{border-radius:0.25rem} .rounded-2xl{border-radius:1rem} .rounded-3xl{border-radius:1.5rem} .rounded-full{border-radius:9999px} .rounded-lg{border-radius:0.5rem} .rounded-md{border-radius:0.375rem} .rounded-sm{border-radius:0.125rem} .rounded-xl{border-radius:0.75rem} .rounded-b-md{border-bottom-right-radius:0.375rem;border-bottom-left-radius:0.375rem} .rounded-l-md{border-top-left-radius:0.375rem;border-bottom-left-radius:0.375rem} .rounded-r-md{border-top-right-radius:0.375rem;border-bottom-right-radius:0.375rem} .rounded-t-md{border-top-left-radius:0.375rem;border-top-right-radius:0.375rem} .border{border-width:1px} .border-0{border-width:0px} .border-2{border-width:2px} .border-4{border-width:4px} .border-b{border-bottom-width:1px} .border-b-2{border-bottom-width:2px} .border-l-2{border-left-width:2px} .border-t{border-top-width:1px} .border-t-2{border-top-width:2px} .border-solid{border-style:solid} .border-dashed{border-style:dashed} .border-dotted{border-style:dotted} .border-none{border-style:none} .border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138 / var(--tw-border-opacity))} .border-amber-300{--tw-border-opacity:1;border-color:rgb(252 211 77 / var(--tw-border-opacity))} .border-black\/10{border-color:rgb(0 0 0 / 0.1)} .border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254 / var(--tw-border-opacity))} .border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))} .border-blue-600{--tw-border-opacity:1;border-color:rgb(37 99 235 / var(--tw-border-opacity))} .border-cyan-200{--tw-border-opacity:1;border-color:rgb(165 243 252 / var(--tw-border-opacity))} .border-cyan-400{--tw-border-opacity:1;border-color:rgb(34 211 238 / var(--tw-border-opacity))} .border-cyan-500{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .border-cyan-600{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))} .border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))} .border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))} .border-gray-500{--tw-border-opacity:1;border-color:rgb(107 114 128 / var(--tw-border-opacity))} .border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208 / var(--tw-border-opacity))} .border-green-300{--tw-border-opacity:1;border-color:rgb(134 239 172 / var(--tw-border-opacity))} .border-myblue{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .border-myblue\/20{border-color:rgb(41 63 88 / 0.2)} .border-mydarkgrey{--tw-border-opacity:1;border-color:rgb(57 61 52 / var(--tw-border-opacity))} .border-mydarkgrey\/20{border-color:rgb(57 61 52 / 0.2)} .border-mydarkgrey\/30{border-color:rgb(57 61 52 / 0.3)} .border-mylightgrey{--tw-border-opacity:1;border-color:rgb(167 177 183 / var(--tw-border-opacity))} .border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170 / var(--tw-border-opacity))} .border-purple-200{--tw-border-opacity:1;border-color:rgb(233 213 255 / var(--tw-border-opacity))} .border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202 / var(--tw-border-opacity))} .border-red-300{--tw-border-opacity:1;border-color:rgb(252 165 165 / var(--tw-border-opacity))} .border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))} .border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249 / var(--tw-border-opacity))} .border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity))} .border-transparent{border-color:transparent} .border-white{--tw-border-opacity:1;border-color:rgb(255 255 255 / var(--tw-border-opacity))} .border-yellow-200{--tw-border-opacity:1;border-color:rgb(254 240 138 / var(--tw-border-opacity))} .border-r-transparent{border-right-color:transparent} .border-t-cyan-600{--tw-border-opacity:1;border-top-color:rgb(8 145 178 / var(--tw-border-opacity))} .border-t-gray-600{--tw-border-opacity:1;border-top-color:rgb(75 85 99 / var(--tw-border-opacity))} .border-t-gray-900{--tw-border-opacity:1;border-top-color:rgb(17 24 39 / var(--tw-border-opacity))} .border-t-red-600{--tw-border-opacity:1;border-top-color:rgb(220 38 38 / var(--tw-border-opacity))} .border-t-transparent{border-top-color:transparent} .bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199 / var(--tw-bg-opacity))} .bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))} .bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235 / var(--tw-bg-opacity))} .bg-amber-600{--tw-bg-opacity:1;background-color:rgb(217 119 6 / var(--tw-bg-opacity))} .bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))} .bg-black\/10{background-color:rgb(0 0 0 / 0.1)} .bg-black\/70{background-color:rgb(0 0 0 / 0.7)} .bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))} .bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))} .bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))} .bg-brand-1{background-color:var(--brand-1)} .bg-cyan-100{--tw-bg-opacity:1;background-color:rgb(207 250 254 / var(--tw-bg-opacity))} .bg-cyan-50{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))} .bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178 / var(--tw-bg-opacity))} .bg-cyan-600\/10{background-color:rgb(8 145 178 / 0.1)} .bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))} .bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))} .bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))} .bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))} .bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))} .bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99 / var(--tw-bg-opacity))} .bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))} .bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))} .bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244 / var(--tw-bg-opacity))} .bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))} .bg-lime-400{--tw-bg-opacity:1;background-color:rgb(163 230 53 / var(--tw-bg-opacity))} .bg-myblue{--tw-bg-opacity:1;background-color:rgb(41 63 88 / var(--tw-bg-opacity))} .bg-myblue\/20{background-color:rgb(41 63 88 / 0.2)} .bg-mydarkgrey{--tw-bg-opacity:1;background-color:rgb(57 61 52 / var(--tw-bg-opacity))} .bg-mylightgrey{--tw-bg-opacity:1;background-color:rgb(167 177 183 / var(--tw-bg-opacity))} .bg-myoffwhite{--tw-bg-opacity:1;background-color:rgb(227 227 227 / var(--tw-bg-opacity))} .bg-myorange{--tw-bg-opacity:1;background-color:rgb(245 131 51 / var(--tw-bg-opacity))} .bg-mywhite{--tw-bg-opacity:1;background-color:rgb(252 252 252 / var(--tw-bg-opacity))} .bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))} .bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237 / var(--tw-bg-opacity))} .bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))} .bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12 / var(--tw-bg-opacity))} .bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255 / var(--tw-bg-opacity))} .bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))} .bg-red-400{--tw-bg-opacity:1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))} .bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))} .bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))} .bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38 / var(--tw-bg-opacity))} .bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))} .bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))} .bg-teal-400{--tw-bg-opacity:1;background-color:rgb(45 212 191 / var(--tw-bg-opacity))} .bg-transparent{background-color:transparent} .bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))} .bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))} .bg-yellow-50{--tw-bg-opacity:1;background-color:rgb(254 252 232 / var(--tw-bg-opacity))} .bg-opacity-0{--tw-bg-opacity:0} .bg-opacity-20{--tw-bg-opacity:0.2} .bg-opacity-50{--tw-bg-opacity:0.5} .bg-opacity-75{--tw-bg-opacity:0.75} .bg-opacity-80{--tw-bg-opacity:0.8} .bg-opacity-85{--tw-bg-opacity:0.85} .bg-opacity-90{--tw-bg-opacity:0.9} .bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))} .from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:rgb(0 0 0 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)} .to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)} .object-contain{object-fit:contain} .object-cover{object-fit:cover} .p-0{padding:0px} .p-1{padding:0.25rem} .p-2{padding:0.5rem} .p-3{padding:0.75rem} .p-4{padding:1rem} .p-6{padding:1.5rem} .p-8{padding:2rem} .px-1{padding-left:0.25rem;padding-right:0.25rem} .px-2{padding-left:0.5rem;padding-right:0.5rem} .px-3{padding-left:0.75rem;padding-right:0.75rem} .px-4{padding-left:1rem;padding-right:1rem} .px-5{padding-left:1.25rem;padding-right:1.25rem} .px-6{padding-left:1.5rem;padding-right:1.5rem} .px-8{padding-left:2rem;padding-right:2rem} .px-9{padding-left:2.25rem;padding-right:2.25rem} .py-1{padding-top:0.25rem;padding-bottom:0.25rem} .py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3rem;padding-bottom:3rem} .py-2{padding-top:0.5rem;padding-bottom:0.5rem} .py-24{padding-top:6rem;padding-bottom:6rem} .py-3{padding-top:0.75rem;padding-bottom:0.75rem} .py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem} .py-4{padding-top:1rem;padding-bottom:1rem} .py-5{padding-top:1.25rem;padding-bottom:1.25rem} .py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2rem;padding-bottom:2rem} .pb-2{padding-bottom:0.5rem} .pb-2\.5{padding-bottom:0.625rem} .pb-3{padding-bottom:0.75rem} .pb-4{padding-bottom:1rem} .pb-6{padding-bottom:1.5rem} .pl-10{padding-left:2.5rem} .pl-12{padding-left:3rem} .pl-2{padding-left:0.5rem} .pl-3{padding-left:0.75rem} .pl-5{padding-left:1.25rem} .pl-6{padding-left:1.5rem} .pr-0{padding-right:0px} .pr-10{padding-right:2.5rem} .pr-12{padding-right:3rem} .pr-16{padding-right:4rem} .pr-2{padding-right:0.5rem} .pr-3{padding-right:0.75rem} .pr-4{padding-right:1rem} .pr-8{padding-right:2rem} .pr-9{padding-right:2.25rem} .pt-0{padding-top:0px} .pt-12{padding-top:3rem} .pt-16{padding-top:4rem} .pt-2{padding-top:0.5rem} .pt-4{padding-top:1rem} .pt-6{padding-top:1.5rem} .pt-8{padding-top:2rem} .text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right} .font-action{font-family:var(--font-action), Inter, Georgia, Times New Roman, Times, serif} .font-main{font-family:var(--font-main), Inter, Arial, Helvetica Neue, Helvetica, sans-serif} .font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace} .font-sans{font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"} .text-2xl{font-size:1.5rem} .text-3xl{font-size:1.875rem} .text-5xl{font-size:3rem} .text-base{font-size:1rem} .text-lg{font-size:1.125rem} .text-sm{font-size:0.875rem} .text-xl{font-size:1.25rem} .text-xs{font-size:0.75rem} .font-bold{font-weight:700} .font-medium{font-weight:500} .font-normal{font-weight:400} .font-semibold{font-weight:600} .uppercase{text-transform:uppercase} .lowercase{text-transform:lowercase} .capitalize{text-transform:capitalize} .normal-case{text-transform:none} .italic{font-style:italic} .not-italic{font-style:normal} .leading-5{line-height:1.25rem} .leading-6{line-height:1.5rem} .leading-9{line-height:2.25rem} .leading-loose{line-height:2} .leading-none{line-height:1} .leading-relaxed{line-height:1.625} .tracking-tight{letter-spacing:-0.025em} .tracking-wide{letter-spacing:0.025em} .tracking-wider{letter-spacing:0.05em} .text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36 / var(--tw-text-opacity))} .text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11 / var(--tw-text-opacity))} .text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity))} .text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9 / var(--tw-text-opacity))} .text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14 / var(--tw-text-opacity))} .text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .text-black\/20{color:rgb(0 0 0 / 0.2)} .text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity))} .text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))} .text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))} .text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216 / var(--tw-text-opacity))} .text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity))} .text-brand-2{color:var(--brand-2)} .text-brand-5{color:var(--brand-5)} .text-brand-7{color:var(--brand-7)} .text-brand-8{color:var(--brand-8)} .text-cyan-500{--tw-text-opacity:1;color:rgb(6 182 212 / var(--tw-text-opacity))} .text-cyan-600{--tw-text-opacity:1;color:rgb(8 145 178 / var(--tw-text-opacity))} .text-cyan-700{--tw-text-opacity:1;color:rgb(14 116 144 / var(--tw-text-opacity))} .text-cyan-800{--tw-text-opacity:1;color:rgb(21 94 117 / var(--tw-text-opacity))} .text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219 / var(--tw-text-opacity))} .text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))} .text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))} .text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))} .text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .text-green-400{--tw-text-opacity:1;color:rgb(74 222 128 / var(--tw-text-opacity))} .text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))} .text-green-600{--tw-text-opacity:1;color:rgb(22 163 74 / var(--tw-text-opacity))} .text-green-700{--tw-text-opacity:1;color:rgb(21 128 61 / var(--tw-text-opacity))} .text-green-800{--tw-text-opacity:1;color:rgb(22 101 52 / var(--tw-text-opacity))} .text-myblack{--tw-text-opacity:1;color:rgb(16 18 13 / var(--tw-text-opacity))} .text-myblue{--tw-text-opacity:1;color:rgb(41 63 88 / var(--tw-text-opacity))} .text-myblue\/80{color:rgb(41 63 88 / 0.8)} .text-mydarkgrey{--tw-text-opacity:1;color:rgb(57 61 52 / var(--tw-text-opacity))} .text-mylightgrey{--tw-text-opacity:1;color:rgb(167 177 183 / var(--tw-text-opacity))} .text-myorange{--tw-text-opacity:1;color:rgb(245 131 51 / var(--tw-text-opacity))} .text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60 / var(--tw-text-opacity))} .text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22 / var(--tw-text-opacity))} .text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))} .text-orange-700{--tw-text-opacity:1;color:rgb(194 65 12 / var(--tw-text-opacity))} .text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18 / var(--tw-text-opacity))} .text-purple-800{--tw-text-opacity:1;color:rgb(107 33 168 / var(--tw-text-opacity))} .text-red-400{--tw-text-opacity:1;color:rgb(248 113 113 / var(--tw-text-opacity))} .text-red-500{--tw-text-opacity:1;color:rgb(239 68 68 / var(--tw-text-opacity))} .text-red-600{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))} .text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))} .text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .text-yellow-700{--tw-text-opacity:1;color:rgb(161 98 7 / var(--tw-text-opacity))} .text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14 / var(--tw-text-opacity))} .underline{text-decoration-line:underline} .overline{text-decoration-line:overline} .line-through{text-decoration-line:line-through} .no-underline{text-decoration-line:none} .underline-offset-2{text-underline-offset:2px} .underline-offset-4{text-underline-offset:4px} .placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175 / var(--tw-placeholder-opacity))} .placeholder-gray-500::placeholder{--tw-placeholder-opacity:1;color:rgb(107 114 128 / var(--tw-placeholder-opacity))} .opacity-0{opacity:0} .opacity-100{opacity:1} .opacity-25{opacity:0.25} .opacity-50{opacity:0.5} .opacity-60{opacity:0.6} .opacity-75{opacity:0.75} .mix-blend-difference{mix-blend-mode:difference} .shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .outline-none{outline:2px solid transparent;outline-offset:2px} .outline{outline-style:solid} .outline-dashed{outline-style:dashed} .outline-dotted{outline-style:dotted} .outline-2{outline-width:2px} .outline-4{outline-width:4px} .outline-offset-2{outline-offset:2px} .outline-cyan-500{outline-color:#06b6d4} .outline-cyan-600{outline-color:#0891b2} .outline-red-700{outline-color:#b91c1c} .ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .ring-inset{--tw-ring-inset:inset} .ring-black{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))} .ring-black\/5{--tw-ring-color:rgb(0 0 0 / 0.05)} .ring-cyan-600{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .ring-gray-300{--tw-ring-opacity:1;--tw-ring-color:rgb(209 213 219 / var(--tw-ring-opacity))} .ring-mydarkgrey\/5{--tw-ring-color:rgb(57 61 52 / 0.05)} .ring-mygreen{--tw-ring-opacity:1;--tw-ring-color:rgb(200 223 140 / var(--tw-ring-opacity))} .ring-mylightgrey{--tw-ring-opacity:1;--tw-ring-color:rgb(167 177 183 / var(--tw-ring-opacity))} .ring-orange-500{--tw-ring-opacity:1;--tw-ring-color:rgb(249 115 22 / var(--tw-ring-opacity))} .ring-red-300{--tw-ring-opacity:1;--tw-ring-color:rgb(252 165 165 / var(--tw-ring-opacity))} .ring-opacity-5{--tw-ring-opacity:0.05} .blur{--tw-blur:blur(8px);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)} .drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));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)} .grayscale{--tw-grayscale:grayscale(100%);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)} .invert{--tw-invert:invert(100%);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)} .sepia{--tw-sepia:sepia(100%);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)} .filter{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)} .backdrop-blur{--tw-backdrop-blur:blur(8px);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)} .backdrop-blur-sm{--tw-backdrop-blur:blur(4px);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)} .backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);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)} .backdrop-invert{--tw-backdrop-invert:invert(100%);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)} .backdrop-sepia{--tw-backdrop-sepia:sepia(100%);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)} .backdrop-filter{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)} .transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms} .duration-150{transition-duration:150ms} .duration-200{transition-duration:200ms} .duration-300{transition-duration:300ms} .ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)} .ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)} .ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)} .placeholder\:text-gray-400::placeholder{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .placeholder\:text-mydarkgrey::placeholder{--tw-text-opacity:1;color:rgb(57 61 52 / var(--tw-text-opacity))} .placeholder\:text-mylightgrey::placeholder{--tw-text-opacity:1;color:rgb(167 177 183 / var(--tw-text-opacity))} .before\:pointer-events-none::before{content:var(--tw-content);pointer-events:none} .before\:absolute::before{content:var(--tw-content);position:absolute} .before\:inset-0::before{content:var(--tw-content);inset:0px} .before\:opacity-50::before{content:var(--tw-content);opacity:0.5} .before\:outline-dashed::before{content:var(--tw-content);outline-style:dashed} .before\:outline-4::before{content:var(--tw-content);outline-width:4px} .before\:outline-red-700::before{content:var(--tw-content);outline-color:#b91c1c} .last\:border-b-0:last-child{border-bottom-width:0px} .focus-within\:border-myblue:focus-within{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .focus-within\:ring-1:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus-within\:ring-myblue:focus-within{--tw-ring-opacity:1;--tw-ring-color:rgb(41 63 88 / var(--tw-ring-opacity))} .hover\:rotate-1:hover{--tw-rotate:1deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rotate-3:hover{--tw-rotate:3deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rotate-6:hover{--tw-rotate:6deg;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))} .hover\:rounded:hover{border-radius:0.25rem} .hover\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))} .hover\:border-cyan-100:hover{--tw-border-opacity:1;border-color:rgb(207 250 254 / var(--tw-border-opacity))} .hover\:border-cyan-400:hover{--tw-border-opacity:1;border-color:rgb(34 211 238 / var(--tw-border-opacity))} .hover\:border-cyan-500:hover{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .hover\:border-cyan-600:hover{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .hover\:border-cyan-700:hover{--tw-border-opacity:1;border-color:rgb(14 116 144 / var(--tw-border-opacity))} .hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))} .hover\:bg-amber-50:hover{--tw-bg-opacity:1;background-color:rgb(255 251 235 / var(--tw-bg-opacity))} .hover\:bg-amber-700:hover{--tw-bg-opacity:1;background-color:rgb(180 83 9 / var(--tw-bg-opacity))} .hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))} .hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254 / var(--tw-bg-opacity))} .hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255 / var(--tw-bg-opacity))} .hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235 / var(--tw-bg-opacity))} .hover\:bg-brand-3:hover{background-color:var(--brand-3)} .hover\:bg-cyan-100:hover{--tw-bg-opacity:1;background-color:rgb(207 250 254 / var(--tw-bg-opacity))} .hover\:bg-cyan-200:hover{--tw-bg-opacity:1;background-color:rgb(165 243 252 / var(--tw-bg-opacity))} .hover\:bg-cyan-50:hover{--tw-bg-opacity:1;background-color:rgb(236 254 255 / var(--tw-bg-opacity))} .hover\:bg-cyan-50\/20:hover{background-color:rgb(236 254 255 / 0.2)} .hover\:bg-cyan-500:hover{--tw-bg-opacity:1;background-color:rgb(6 182 212 / var(--tw-bg-opacity))} .hover\:bg-cyan-600:hover{--tw-bg-opacity:1;background-color:rgb(8 145 178 / var(--tw-bg-opacity))} .hover\:bg-cyan-600\/20:hover{background-color:rgb(8 145 178 / 0.2)} .hover\:bg-cyan-700:hover{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .hover\:bg-cyan-800:hover{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))} .hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))} .hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))} .hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity))} .hover\:bg-gray-400:hover{--tw-bg-opacity:1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))} .hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))} .hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))} .hover\:bg-green-200:hover{--tw-bg-opacity:1;background-color:rgb(187 247 208 / var(--tw-bg-opacity))} .hover\:bg-myblack:hover{--tw-bg-opacity:1;background-color:rgb(16 18 13 / var(--tw-bg-opacity))} .hover\:bg-myblue\/10:hover{background-color:rgb(41 63 88 / 0.1)} .hover\:bg-mydarkgrey\/10:hover{background-color:rgb(57 61 52 / 0.1)} .hover\:bg-mygreen\/20:hover{background-color:rgb(200 223 140 / 0.2)} .hover\:bg-mylightgrey:hover{--tw-bg-opacity:1;background-color:rgb(167 177 183 / var(--tw-bg-opacity))} .hover\:bg-myorange:hover{--tw-bg-opacity:1;background-color:rgb(245 131 51 / var(--tw-bg-opacity))} .hover\:bg-orange-100:hover{--tw-bg-opacity:1;background-color:rgb(255 237 213 / var(--tw-bg-opacity))} .hover\:bg-orange-200:hover{--tw-bg-opacity:1;background-color:rgb(254 215 170 / var(--tw-bg-opacity))} .hover\:bg-orange-500:hover{--tw-bg-opacity:1;background-color:rgb(249 115 22 / var(--tw-bg-opacity))} .hover\:bg-orange-600:hover{--tw-bg-opacity:1;background-color:rgb(234 88 12 / var(--tw-bg-opacity))} .hover\:bg-red-200:hover{--tw-bg-opacity:1;background-color:rgb(254 202 202 / var(--tw-bg-opacity))} .hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))} .hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .hover\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))} .hover\:bg-white\/50:hover{background-color:rgb(255 255 255 / 0.5)} .hover\:bg-opacity-100:hover{--tw-bg-opacity:1} .hover\:bg-opacity-20:hover{--tw-bg-opacity:0.2} .hover\:font-bold:hover{font-weight:700} .hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))} .hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175 / var(--tw-text-opacity))} .hover\:text-brand-1:hover{color:var(--brand-1)} .hover\:text-cyan-600:hover{--tw-text-opacity:1;color:rgb(8 145 178 / var(--tw-text-opacity))} .hover\:text-cyan-700:hover{--tw-text-opacity:1;color:rgb(14 116 144 / var(--tw-text-opacity))} .hover\:text-cyan-800:hover{--tw-text-opacity:1;color:rgb(21 94 117 / var(--tw-text-opacity))} .hover\:text-cyan-900:hover{--tw-text-opacity:1;color:rgb(22 78 99 / var(--tw-text-opacity))} .hover\:text-gray-500:hover{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))} .hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))} .hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))} .hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .hover\:text-green-500:hover{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))} .hover\:text-myblack:hover{--tw-text-opacity:1;color:rgb(16 18 13 / var(--tw-text-opacity))} .hover\:text-myblue:hover{--tw-text-opacity:1;color:rgb(41 63 88 / var(--tw-text-opacity))} .hover\:text-myorange:hover{--tw-text-opacity:1;color:rgb(245 131 51 / var(--tw-text-opacity))} .hover\:text-orange-600:hover{--tw-text-opacity:1;color:rgb(234 88 12 / var(--tw-text-opacity))} .hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))} .hover\:text-red-800:hover{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))} .hover\:text-red-900:hover{--tw-text-opacity:1;color:rgb(127 29 29 / var(--tw-text-opacity))} .hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .hover\:underline:hover{text-decoration-line:underline} .hover\:decoration-dashed:hover{text-decoration-style:dashed} .hover\:decoration-4:hover{text-decoration-thickness:4px} .hover\:underline-offset-4:hover{text-underline-offset:4px} .hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)} .hover\:outline:hover{outline-style:solid} .hover\:ring-2:hover{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .hover\:ring-cyan-600:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .hover\:before\:bg-red-600\/50:hover::before{content:var(--tw-content);background-color:rgb(220 38 38 / 0.5)} .hover\:before\:opacity-100:hover::before{content:var(--tw-content);opacity:1} .focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246 / var(--tw-border-opacity))} .focus\:border-cyan-500:focus{--tw-border-opacity:1;border-color:rgb(6 182 212 / var(--tw-border-opacity))} .focus\:border-cyan-600:focus{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))} .focus\:border-cyan-700:focus{--tw-border-opacity:1;border-color:rgb(14 116 144 / var(--tw-border-opacity))} .focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(99 102 241 / var(--tw-border-opacity))} .focus\:border-myblue:focus{--tw-border-opacity:1;border-color:rgb(41 63 88 / var(--tw-border-opacity))} .focus\:border-red-500:focus{--tw-border-opacity:1;border-color:rgb(239 68 68 / var(--tw-border-opacity))} .focus\:bg-brand-7:focus{background-color:var(--brand-7)} .focus\:bg-cyan-700:focus{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))} .focus\:text-black:focus{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))} .focus\:text-gray-600:focus{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))} .focus\:text-red-600:focus{--tw-text-opacity:1;color:rgb(220 38 38 / var(--tw-text-opacity))} .focus\:text-white:focus{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .focus\:underline:focus{text-decoration-line:underline} .focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px} .focus\:outline-offset-0:focus{outline-offset:0px} .focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} .focus\:ring-inset:focus{--tw-ring-inset:inset} .focus\:ring-amber-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 158 11 / var(--tw-ring-opacity))} .focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))} .focus\:ring-brand-1:focus{--tw-ring-color:var(--brand-1)} .focus\:ring-cyan-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(6 182 212 / var(--tw-ring-opacity))} .focus\:ring-cyan-600:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(8 145 178 / var(--tw-ring-opacity))} .focus\:ring-cyan-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 116 144 / var(--tw-ring-opacity))} .focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity))} .focus\:ring-myblue:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(41 63 88 / var(--tw-ring-opacity))} .focus\:ring-myorange:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 131 51 / var(--tw-ring-opacity))} .focus\:ring-red-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity))} .focus\:ring-offset-2:focus{--tw-ring-offset-width:2px} .focus\:before\:bg-red-600\/50:focus::before{content:var(--tw-content);background-color:rgb(220 38 38 / 0.5)} .focus\:before\:opacity-100:focus::before{content:var(--tw-content);opacity:1} .focus-visible\:outline:focus-visible{outline-style:solid} .focus-visible\:outline-2:focus-visible{outline-width:2px} .focus-visible\:outline-offset-2:focus-visible{outline-offset:2px} .focus-visible\:outline-cyan-600:focus-visible{outline-color:#0891b2} .focus-visible\:outline-myorange:focus-visible{outline-color:#f58333} .disabled\:cursor-not-allowed:disabled{cursor:not-allowed} .disabled\:text-gray-400:disabled{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))} .disabled\:opacity-50:disabled{opacity:0.5} .disabled\:hover\:bg-transparent:hover:disabled{background-color:transparent} .group:focus-within .group-focus-within\:bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .group:focus-within .group-focus-within\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .group:focus-within .group-focus-within\:opacity-100{opacity:1} .group:hover .group-hover\:visible{visibility:visible} .group:hover .group-hover\:bg-cyan-200{--tw-bg-opacity:1;background-color:rgb(165 243 252 / var(--tw-bg-opacity))} .group:hover .group-hover\:bg-red-700{--tw-bg-opacity:1;background-color:rgb(185 28 28 / var(--tw-bg-opacity))} .group:hover .group-hover\:bg-slate-200\/20{background-color:rgb(226 232 240 / 0.2)} .group:hover .group-hover\:bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))} .group:hover .group-hover\:text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))} .group:hover .group-hover\:text-myblue{--tw-text-opacity:1;color:rgb(41 63 88 / var(--tw-text-opacity))} .group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))} .group:hover .group-hover\:opacity-100{opacity:1} @media (prefers-reduced-motion: no-preference){@keyframes bounce{0%, 100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}.motion-safe\:animate-bounce{animation:bounce 1s infinite}@keyframes pulse{50%{opacity:.5}}.motion-safe\:animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes wiggle{0%, 100%{transform:translateX(3%)}50%{transform:translateX(0)}}.motion-safe\:animate-wig{animation:wiggle 1s ease-in-out infinite}.motion-safe\:scroll-smooth{scroll-behavior:smooth}} @media (min-width: 0px){.xs\:flex{display:flex}.xs\:hidden{display:none}.xs\:flex-row{flex-direction:row}.xs\:items-start{align-items:flex-start}.xs\:justify-between{justify-content:space-between}.xs\:text-sm{font-size:0.875rem}.xs\:leading-6{line-height:1.5rem}} @media (min-width: 801px){.md\:static{position:static}.md\:fixed{position:fixed}.md\:sticky{position:sticky}.md\:bottom-2{bottom:0.5rem}.md\:bottom-auto{bottom:auto}.md\:left-0{left:0px}.md\:top-24{top:6rem}.md\:col-span-1{grid-column:span 1 / span 1}.md\:col-span-2{grid-column:span 2 / span 2}.md\:mx-10{margin-left:2.5rem;margin-right:2.5rem}.md\:mb-10{margin-bottom:2.5rem}.md\:mt-0{margin-top:0px}.md\:mt-2{margin-top:0.5rem}.md\:block{display:block}.md\:flex{display:flex}.md\:table-cell{display:table-cell}.md\:hidden{display:none}.md\:h-8{height:2rem}.md\:h-screen{height:100vh}.md\:w-1\/2{width:50%}.md\:w-16{width:4rem}.md\:w-2\/5{width:40%}.md\:w-3\/5{width:60%}.md\:max-w-72{max-width:18rem}.md\:flex-1{flex:1 1 0%}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-10{gap:2.5rem}.md\:gap-2{gap:0.5rem}.md\:gap-4{gap:1rem}.md\:gap-8{gap:2rem}.md\:space-x-0 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0px * var(--tw-space-x-reverse));margin-left:calc(0px * calc(1 - var(--tw-space-x-reverse)))}.md\:space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.md\:space-y-0 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.md\:space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.md\:rounded-lg{border-radius:0.5rem}.md\:border-l-2{border-left-width:2px}.md\:border-t-0{border-top-width:0px}.md\:p-4{padding:1rem}.md\:p-8{padding:2rem}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:px-14{padding-left:3.5rem;padding-right:3.5rem}.md\:px-4{padding-left:1rem;padding-right:1rem}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:py-2{padding-top:0.5rem;padding-bottom:0.5rem}.md\:py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.md\:py-3{padding-top:0.75rem;padding-bottom:0.75rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:pb-3{padding-bottom:0.75rem}.md\:pb-3\.5{padding-bottom:0.875rem}.md\:pt-0{padding-top:0px}.md\:pt-9{padding-top:2.25rem}.md\:text-3xl{font-size:1.875rem}.md\:text-xl{font-size:1.25rem}.md\:leading-relaxed{line-height:1.625}.md\:text-yellow-300{--tw-text-opacity:1;color:rgb(253 224 71 / var(--tw-text-opacity))}} @media (min-width: 1367px){.xl\:block{display:block}.xl\:table-cell{display:table-cell}.xl\:hidden{display:none}.xl\:max-w-screen-xl{max-width:1367px}.xl\:gap-12{gap:3rem}.xl\:px-32{padding-left:8rem;padding-right:8rem}.xl\:px-6{padding-left:1.5rem;padding-right:1.5rem}.xl\:py-6{padding-top:1.5rem;padding-bottom:1.5rem}.xl\:pt-12{padding-top:3rem}.xl\:text-red-700{--tw-text-opacity:1;color:rgb(185 28 28 / var(--tw-text-opacity))}} @media (prefers-color-scheme: dark){.dark\:border-cyan-600{--tw-border-opacity:1;border-color:rgb(8 145 178 / var(--tw-border-opacity))}.dark\:bg-cyan-800{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))}.dark\:bg-cyan-900{--tw-bg-opacity:1;background-color:rgb(22 78 99 / var(--tw-bg-opacity))}.dark\:text-cyan-300{--tw-text-opacity:1;color:rgb(103 232 249 / var(--tw-text-opacity))}.dark\:hover\:bg-cyan-800:hover{--tw-bg-opacity:1;background-color:rgb(21 94 117 / var(--tw-bg-opacity))}.group:hover .dark\:group-hover\:bg-cyan-700{--tw-bg-opacity:1;background-color:rgb(14 116 144 / var(--tw-bg-opacity))}}
package/templates/src/components/search/SearchModal.tsx CHANGED
@@ -21,13 +21,26 @@ interface SearchModalProps {
21
21
  contentMap: FullContentMapItem[];
22
22
  }
23
23
 
24
+ // --- CHANGE START ---
25
+ // 1. Define a new type for the selected suggestions to include their type
26
+ interface SelectedSuggestion {
27
+ term: string;
28
+ type: string;
29
+ }
30
+ // --- CHANGE END ---
31
+
24
32
  export default function SearchModal({
25
33
  isOpen,
26
34
  onClose,
27
35
  contentMap,
28
36
  }: SearchModalProps) {
29
37
  const [query, setQuery] = useState('');
30
- const [selectedTerms, setSelectedTerms] = useState<string[]>([]);
38
+ // --- CHANGE START ---
39
+ // 2. Update state to use the new type instead of just string[]
40
+ const [selectedSuggestions, setSelectedSuggestions] = useState<
41
+ SelectedSuggestion[]
42
+ >([]);
43
+ // --- CHANGE END ---
31
44
  const inputRef = useRef<HTMLInputElement>(null);
32
45
  const {
33
46
  suggestions,
@@ -51,13 +64,15 @@ export default function SearchModal({
51
64
  useEffect(() => {
52
65
  if (!isOpen) {
53
66
  setQuery('');
54
- setSelectedTerms([]);
67
+ // --- CHANGE START ---
68
+ // 3. Update cleanup logic to use the new state
69
+ setSelectedSuggestions([]);
70
+ // --- CHANGE END ---
55
71
  clearAll();
56
72
  }
57
73
  }, [isOpen, clearAll]);
58
74
 
59
75
  useEffect(() => {
60
- // Only trigger discovery if query has 3+ characters
61
76
  if (query.trim().length >= 3) {
62
77
  discoverTerms(query);
63
78
  }
@@ -69,7 +84,10 @@ export default function SearchModal({
69
84
 
70
85
  const handleClose = () => {
71
86
  setQuery('');
72
- setSelectedTerms([]);
87
+ // --- CHANGE START ---
88
+ // 4. Update cleanup logic to use the new state
89
+ setSelectedSuggestions([]);
90
+ // --- CHANGE END ---
73
91
  clearAll();
74
92
  onClose();
75
93
  };
@@ -78,25 +96,20 @@ export default function SearchModal({
78
96
  if (e.key === 'Escape') {
79
97
  handleClose();
80
98
  } else if (e.key === 'Enter' && query.trim()) {
81
- // Only proceed if we have suggestions or query is 3+ chars
82
99
  if (query.trim().length < 3) return;
83
100
 
84
- // If there's only one suggestion, select it
85
101
  if (suggestions.length === 1) {
86
102
  handleSuggestionSelect(suggestions[0]);
87
103
  } else if (suggestions.length > 0) {
88
- // Check for exact match first
89
104
  const exactMatch = suggestions.find(
90
105
  (s) => s.term.toLowerCase() === query.trim().toLowerCase()
91
106
  );
92
107
  if (exactMatch) {
93
108
  handleSuggestionSelect(exactMatch);
94
109
  } else {
95
- // No exact match, select first suggestion
96
110
  handleSuggestionSelect(suggestions[0]);
97
111
  }
98
112
  } else {
99
- // No suggestions, do exact match search
100
113
  handleExactMatch(query.trim());
101
114
  }
102
115
  }
@@ -107,34 +120,42 @@ export default function SearchModal({
107
120
  };
108
121
 
109
122
  const handleSuggestionSelect = (suggestion: DiscoverySuggestion) => {
110
- // Add to selected terms if not already present
111
- if (!selectedTerms.includes(suggestion.term)) {
112
- setSelectedTerms((prev) => [...prev, suggestion.term]);
123
+ // --- CHANGE START ---
124
+ // 5. Update how suggestions are added to the state
125
+ // Check for duplicates before adding
126
+ if (!selectedSuggestions.some((s) => s.term === suggestion.term)) {
127
+ setSelectedSuggestions((prev) => [
128
+ ...prev,
129
+ { term: suggestion.term, type: suggestion.type },
130
+ ]);
113
131
  }
132
+ // --- CHANGE END ---
114
133
 
115
- // Clear input and perform search
116
134
  setQuery('');
117
135
  selectSuggestion(suggestion);
118
136
  };
119
137
 
120
138
  const handleExactMatch = (term: string) => {
121
- // Add to selected terms if not already present
122
- if (!selectedTerms.includes(term)) {
123
- setSelectedTerms((prev) => [...prev, term]);
139
+ // --- CHANGE START ---
140
+ // 6. Update exact match handling to add a default type
141
+ // From the legend, "Exact Match" uses the 'COLLECTION' style
142
+ if (!selectedSuggestions.some((s) => s.term === term)) {
143
+ setSelectedSuggestions((prev) => [...prev, { term, type: 'COLLECTION' }]);
124
144
  }
145
+ // --- CHANGE END ---
125
146
 
126
- // Clear input and perform search
127
147
  setQuery('');
128
148
  selectExactMatch(term);
129
149
  };
130
150
 
131
151
  const removeTerm = (indexToRemove: number) => {
132
- setSelectedTerms((prev) =>
152
+ // --- CHANGE START ---
153
+ // 7. Update remove logic to use the new state
154
+ setSelectedSuggestions((prev) =>
133
155
  prev.filter((_, index) => index !== indexToRemove)
134
156
  );
135
- // Clear search results when removing terms
157
+ // --- CHANGE END ---
136
158
  clearAll();
137
- // Focus back on input
138
159
  if (inputRef.current) {
139
160
  inputRef.current.focus();
140
161
  }
@@ -144,8 +165,8 @@ export default function SearchModal({
144
165
  switch (type) {
145
166
  case 'TOPIC':
146
167
  return 'bg-purple-100 text-purple-800 border-purple-200';
147
- case 'TITLE':
148
- return 'bg-blue-100 text-blue-800 border-blue-200';
168
+ case 'COLLECTION':
169
+ return 'bg-orange-100 text-orange-800 border-orange-200';
149
170
  case 'CONTENT':
150
171
  return 'bg-green-100 text-green-800 border-green-200';
151
172
  default:
@@ -153,13 +174,34 @@ export default function SearchModal({
153
174
  }
154
175
  };
155
176
 
156
- // Autocomplete logic - only show when we have suggestions and query is 3+ chars
177
+ // --- CHANGE START ---
178
+ // 8. (Optional but recommended) Create a helper for the 'X' button color
179
+ const getCloseButtonColor = (type: string) => {
180
+ switch (type) {
181
+ case 'TOPIC':
182
+ return 'text-purple-600 hover:text-purple-800';
183
+ case 'COLLECTION':
184
+ return 'text-orange-600 hover:text-orange-800';
185
+ case 'CONTENT':
186
+ return 'text-green-600 hover:text-green-800';
187
+ default:
188
+ return 'text-gray-600 hover:text-gray-800';
189
+ }
190
+ };
191
+ // --- CHANGE END ---
192
+
157
193
  const bestCompletion =
158
194
  suggestions.length > 0 && query.length >= 3 ? suggestions[0].term : '';
159
195
  const showCompletion =
160
196
  bestCompletion.toLowerCase().startsWith(query.toLowerCase()) &&
161
197
  query.length >= 3;
162
-
198
+ let preservedCompletion = '';
199
+ if (showCompletion) {
200
+ const completionText = bestCompletion.slice(query.length);
201
+ preservedCompletion = completionText.startsWith(' ')
202
+ ? '\u00A0' + completionText.slice(1)
203
+ : completionText;
204
+ }
163
205
  const showSuggestions =
164
206
  suggestions.length > 0 && !searchResults && query.length >= 3;
165
207
  const showResults = searchResults !== null;
@@ -181,34 +223,44 @@ export default function SearchModal({
181
223
  className="bg-mywhite mx-auto w-full overflow-hidden rounded-lg shadow-2xl"
182
224
  style={{ height: '80vh' }}
183
225
  >
184
- {/* Fixed Header */}
185
226
  <div className="relative w-full border-b border-gray-200 p-4">
186
- {/* Selected Terms Pills */}
187
- {selectedTerms.length > 0 && (
227
+ {/* --- CHANGE START --- */}
228
+ {/* 9. Update the rendering of selected term pills */}
229
+ {selectedSuggestions.length > 0 && (
188
230
  <div className="mb-3 flex flex-wrap gap-2">
189
- {selectedTerms.map((term, index) => (
231
+ {selectedSuggestions.map((suggestion, index) => (
190
232
  <div
191
233
  key={index}
192
- className="flex items-center gap-1 rounded-full border border-blue-200 bg-blue-100 px-3 py-1 text-sm font-medium text-blue-800"
234
+ // Use getTypeColor to dynamically set the class
235
+ className={`inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
236
+ suggestion.type
237
+ )}`}
193
238
  >
194
- <span>{term}</span>
239
+ <span>{suggestion.term}</span>
195
240
  <button
196
241
  onClick={() => removeTerm(index)}
197
- className="ml-1 rounded-full p-0.5 text-blue-600 hover:bg-blue-200 hover:text-blue-800"
198
- aria-label={`Remove ${term}`}
242
+ // Use the new helper for the button color
243
+ className={`flex items-center justify-center rounded-full ${getCloseButtonColor(
244
+ suggestion.type
245
+ )}`}
246
+ aria-label={`Remove ${suggestion.term}`}
199
247
  >
200
- <XMarkIcon className="h-3 w-3" />
248
+ <XMarkIcon className="h-4 w-4" />
201
249
  </button>
202
250
  </div>
203
251
  ))}
204
252
  </div>
205
253
  )}
254
+ {/* --- CHANGE END --- */}
206
255
 
207
256
  {!showResults && (
208
257
  <div className="relative w-full px-6 py-2">
209
258
  {showCompletion && (
210
259
  <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full items-center px-6 py-2 text-xl text-gray-400">
211
- {bestCompletion}
260
+ <span style={{ visibility: 'hidden', whiteSpace: 'pre' }}>
261
+ {query}
262
+ </span>
263
+ {preservedCompletion}
212
264
  </div>
213
265
  )}
214
266
  <input
@@ -223,6 +275,7 @@ export default function SearchModal({
223
275
  />
224
276
  </div>
225
277
  )}
278
+
226
279
  <button
227
280
  onClick={handleClose}
228
281
  className="text-mydarkgrey hover:text-myblue absolute right-4 top-6 rounded-lg p-2 transition-colors hover:bg-gray-100"
@@ -232,13 +285,14 @@ export default function SearchModal({
232
285
  </button>
233
286
  </div>
234
287
 
235
- {/* Scrollable Content Area */}
236
288
  <div
237
289
  className="w-full overflow-y-auto"
238
290
  style={{ height: 'calc(80vh - 80px)' }}
239
291
  >
240
- {/* Initial State */}
241
- {!query.trim() && selectedTerms.length === 0 && (
292
+ {/* --- CHANGE START --- */}
293
+ {/* 10. Final cleanup logic update */}
294
+ {!query.trim() && selectedSuggestions.length === 0 && (
295
+ // --- CHANGE END ---
242
296
  <div className="w-full p-8 text-center text-gray-500">
243
297
  <MagnifyingGlassIcon className="mx-auto mb-4 h-16 w-16 text-gray-300" />
244
298
  <p className="text-lg">Search across all content</p>
@@ -248,7 +302,6 @@ export default function SearchModal({
248
302
  </div>
249
303
  )}
250
304
 
251
- {/* Show message for less than 3 characters */}
252
305
  {query.trim() && query.trim().length < 3 && (
253
306
  <div className="w-full p-8 text-center text-gray-500">
254
307
  <p className="text-lg">Keep typing...</p>
@@ -258,7 +311,6 @@ export default function SearchModal({
258
311
  </div>
259
312
  )}
260
313
 
261
- {/* Discovery Loading */}
262
314
  {query.trim().length >= 3 && isDiscovering && (
263
315
  <div className="w-full p-8 text-center">
264
316
  <div className="border-myblue inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
@@ -266,7 +318,6 @@ export default function SearchModal({
266
318
  </div>
267
319
  )}
268
320
 
269
- {/* Discovery Error */}
270
321
  {query.trim().length >= 3 && discoverError && (
271
322
  <div className="w-full p-8 text-center text-red-600">
272
323
  <p>Discovery failed: {discoverError}</p>
@@ -279,10 +330,9 @@ export default function SearchModal({
279
330
  </div>
280
331
  )}
281
332
 
282
- {/* Suggestion Pills */}
283
333
  {showSuggestions && (
284
334
  <div className="w-full p-6">
285
- <p className="text-mydarkgrey mb-4 text-sm font-medium">
335
+ <p className="text-mydarkgrey mb-4 text-sm font-bold">
286
336
  Suggestions ({suggestions.length})
287
337
  </p>
288
338
  <div className="flex flex-wrap gap-2">
@@ -290,7 +340,9 @@ export default function SearchModal({
290
340
  <button
291
341
  key={index}
292
342
  onClick={() => handleSuggestionClick(suggestion)}
293
- className={`inline-flex items-center rounded-full border px-3 py-1.5 text-sm font-medium transition-all hover:shadow-md ${getTypeColor(suggestion.type)}`}
343
+ className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold transition-all hover:shadow-md ${getTypeColor(
344
+ suggestion.type
345
+ )}`}
294
346
  >
295
347
  <span>{suggestion.term}</span>
296
348
  </button>
@@ -299,10 +351,35 @@ export default function SearchModal({
299
351
  <p className="text-mydarkgrey mt-4 text-xs">
300
352
  Click a suggestion or press Enter to search
301
353
  </p>
354
+ <div className="mt-6 border-t border-gray-200 pt-4">
355
+ <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-gray-600">
356
+ <span className="font-bold">Legend:</span>
357
+ <span
358
+ className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
359
+ 'COLLECTION'
360
+ )}`}
361
+ >
362
+ Exact Match
363
+ </span>
364
+ <span
365
+ className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
366
+ 'TOPIC'
367
+ )}`}
368
+ >
369
+ Topic
370
+ </span>
371
+ <span
372
+ className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold ${getTypeColor(
373
+ 'CONTENT'
374
+ )}`}
375
+ >
376
+ Text Match
377
+ </span>
378
+ </div>
379
+ </div>
302
380
  </div>
303
381
  )}
304
382
 
305
- {/* Retrieve Loading */}
306
383
  {isRetrieving && (
307
384
  <div className="w-full p-8 text-center">
308
385
  <div className="border-myblue inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
@@ -310,14 +387,12 @@ export default function SearchModal({
310
387
  </div>
311
388
  )}
312
389
 
313
- {/* Retrieve Error */}
314
390
  {retrieveError && (
315
391
  <div className="w-full p-8 text-center text-red-600">
316
392
  <p>Search failed: {retrieveError}</p>
317
393
  </div>
318
394
  )}
319
395
 
320
- {/* No Results */}
321
396
  {!isRetrieving &&
322
397
  !retrieveError &&
323
398
  showResults &&
@@ -330,7 +405,6 @@ export default function SearchModal({
330
405
  </div>
331
406
  )}
332
407
 
333
- {/* Search Results */}
334
408
  {!isRetrieving &&
335
409
  !retrieveError &&
336
410
  showResults &&
@@ -338,6 +412,7 @@ export default function SearchModal({
338
412
  <SearchResults
339
413
  results={searchResults}
340
414
  contentMap={contentMap}
415
+ getTypeColor={getTypeColor}
341
416
  />
342
417
  )}
343
418
  </div>
package/templates/src/components/search/SearchResults.tsx CHANGED
@@ -14,6 +14,7 @@ const VERBOSE = false;
14
14
  interface SearchResultsProps {
15
15
  results: CategorizedResults;
16
16
  contentMap: FullContentMapItem[];
17
+ getTypeColor: (type: string) => string;
17
18
  }
18
19
 
19
20
  interface ResultItem {
@@ -35,6 +36,7 @@ const ITEMS_PER_PAGE = 10;
35
36
  export default function SearchResults({
36
37
  results,
37
38
  contentMap,
39
+ getTypeColor,
38
40
  }: SearchResultsProps) {
39
41
  const [currentPage, setCurrentPage] = useState(1);
40
42
 
@@ -189,28 +191,31 @@ export default function SearchResults({
189
191
  };
190
192
 
191
193
  const getResultBadge = (type: string, categorySlug?: string) => {
194
+ let styleType = type;
195
+ let label = '';
192
196
  switch (type) {
193
197
  case 'StoryFragment':
194
- return (
195
- <span className="inline-flex items-center rounded-full bg-blue-100 px-2 py-1 text-xs font-medium text-blue-800">
196
- Page
197
- </span>
198
- );
198
+ label = 'Page';
199
+ break;
199
200
  case 'ContextPane':
200
- return (
201
- <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
202
- Context
203
- </span>
204
- );
201
+ label = 'Context';
202
+ break;
205
203
  case 'Resource':
206
- return (
207
- <span className="inline-flex items-center rounded-full bg-orange-100 px-2 py-1 text-xs font-medium text-orange-800">
208
- {categorySlug || 'Resource'}
209
- </span>
210
- );
204
+ styleType = 'COLLECTION';
205
+ label = categorySlug || 'Resource';
206
+ break;
211
207
  default:
212
208
  return null;
213
209
  }
210
+
211
+ // Get the color classes but extract just the text and background colors for the inline style
212
+ const colorClasses = getTypeColor(styleType);
213
+
214
+ return (
215
+ <span className={`rounded px-2 py-1 text-xs ${colorClasses}`}>
216
+ {label}
217
+ </span>
218
+ );
214
219
  };
215
220
 
216
221
  if (totalResults === 0) {
@@ -238,7 +243,7 @@ export default function SearchResults({
238
243
  >
239
244
  <a href={item.url} className="group block">
240
245
  <div className="flex flex-col md:flex-row md:items-start md:gap-4">
241
- {/* Mobile: Full width image with overlay badge */}
246
+ {/* Mobile: Full width image without overlay badge */}
242
247
  <div
243
248
  className="bg-mydarkgrey relative w-full overflow-hidden rounded-lg md:hidden"
244
249
  style={{ aspectRatio: '1200/630' }}
@@ -248,12 +253,9 @@ export default function SearchResults({
248
253
  alt={item.title}
249
254
  className="h-full w-full object-contain"
250
255
  />
251
- <div className="absolute left-2 top-2">
252
- {getResultBadge(item.type, item.categorySlug)}
253
- </div>
254
256
  </div>
255
257
 
256
- {/* Desktop: Side image with overlay badge */}
258
+ {/* Desktop: Side image without overlay badge */}
257
259
  <div
258
260
  className="bg-mydarkgrey relative hidden flex-shrink-0 overflow-hidden rounded-lg md:block"
259
261
  style={{ width: '240px', height: '135px' }}
@@ -263,9 +265,6 @@ export default function SearchResults({
263
265
  alt={item.title}
264
266
  className="h-full w-full object-contain"
265
267
  />
266
- <div className="absolute left-2 top-2">
267
- {getResultBadge(item.type, item.categorySlug)}
268
- </div>
269
268
  </div>
270
269
 
271
270
  <div className="mt-3 min-w-0 flex-1 md:mt-0">
@@ -279,23 +278,31 @@ export default function SearchResults({
279
278
  {item.description}
280
279
  </p>
281
280
  )}
282
- {item.topics && item.topics.length > 0 && (
283
- <div className="mb-2 flex flex-wrap gap-1">
284
- {item.topics.slice(0, 3).map((topic, idx) => (
285
- <span
286
- key={idx}
287
- className="bg-myoffwhite text-mydarkgrey rounded px-2 py-1 text-xs"
288
- >
289
- {topic}
290
- </span>
291
- ))}
292
- {item.topics.length > 3 && (
293
- <span className="text-mydarkgrey text-xs">
294
- +{item.topics.length - 3} more
295
- </span>
296
- )}
297
- </div>
298
- )}
281
+
282
+ {/* Category badge and topics in same row */}
283
+ <div className="mb-2 flex flex-wrap gap-1">
284
+ {/* Always show the category badge first */}
285
+ {getResultBadge(item.type, item.categorySlug)}
286
+
287
+ {/* Then show topics if they exist */}
288
+ {item.topics && item.topics.length > 0 && (
289
+ <>
290
+ {item.topics.slice(0, 3).map((topic, idx) => (
291
+ <span
292
+ key={idx}
293
+ className="bg-myoffwhite text-mydarkgrey rounded px-2 py-1 text-xs"
294
+ >
295
+ {topic}
296
+ </span>
297
+ ))}
298
+ {item.topics.length > 3 && (
299
+ <span className="text-mydarkgrey text-xs">
300
+ +{item.topics.length - 3} more
301
+ </span>
302
+ )}
303
+ </>
304
+ )}
305
+ </div>
299
306
  </div>
300
307
  </div>
301
308
  </div>
@@ -350,7 +357,7 @@ export default function SearchResults({
350
357
 
351
358
  <Pagination.NextTrigger className="text-mydarkgrey hover:text-myblue ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50">
352
359
  Next
353
- <ChevronRightIcon className="h-4 w-6" />
360
+ <ChevronRightIcon className="h-4 w-4" />
354
361
  </Pagination.NextTrigger>
355
362
  </Pagination.Root>
356
363
  </div>
package/templates/src/hooks/useSearch.ts CHANGED
@@ -23,7 +23,7 @@ interface UseSearchReturn {
23
23
  clearAll: () => void;
24
24
  }
25
25
 
26
- const DEBOUNCE_MS = 100;
26
+ const DEBOUNCE_MS = 150;
27
27
  const BACKEND_THROTTLE_MS = 1200;
28
28
 
29
29
  export function useSearch(): UseSearchReturn {
@@ -39,11 +39,10 @@ export function useSearch(): UseSearchReturn {
39
39
  const [isRetrieving, setIsRetrieving] = useState(false);
40
40
  const [retrieveError, setRetrieveError] = useState<string | null>(null);
41
41
 
42
- // Race condition protection
43
- const debounceRef = useRef<NodeJS.Timeout>();
44
- const lastSearchTimeRef = useRef<number>(0);
42
+ // --- REVISED STATE FOR SEARCH LOGIC ---
43
+ const searchTimerRef = useRef<NodeJS.Timeout>();
44
+ const lastExecutionTimeRef = useRef<number>(0);
45
45
  const pendingQueryRef = useRef<string | null>(null);
46
- const throttleTimeoutRef = useRef<NodeJS.Timeout>();
47
46
  const inflightQueryRef = useRef<string | null>(null);
48
47
  const api = useMemo(() => new TractStackAPI(), []);
49
48
 
@@ -54,21 +53,17 @@ export function useSearch(): UseSearchReturn {
54
53
  return;
55
54
  }
56
55
 
57
- // Check if this exact query is already inflight
58
56
  if (inflightQueryRef.current === query.trim()) {
59
57
  return;
60
58
  }
61
59
 
62
- // Mark this query as inflight
63
60
  inflightQueryRef.current = query.trim();
64
-
65
61
  setIsDiscovering(true);
66
62
  setDiscoverError(null);
67
63
 
68
64
  try {
69
65
  const response = await api.discover(query.trim());
70
66
 
71
- // Only process response if this is still the current inflight query
72
67
  if (inflightQueryRef.current === query.trim()) {
73
68
  if (response.success && response.data) {
74
69
  setSuggestions(response.data.suggestions);
@@ -78,7 +73,6 @@ export function useSearch(): UseSearchReturn {
78
73
  }
79
74
  }
80
75
  } catch (err) {
81
- // Only process error if this is still the current inflight query
82
76
  if (inflightQueryRef.current === query.trim()) {
83
77
  setDiscoverError(
84
78
  err instanceof Error ? err.message : 'Discovery failed'
@@ -86,7 +80,6 @@ export function useSearch(): UseSearchReturn {
86
80
  setSuggestions([]);
87
81
  }
88
82
  } finally {
89
- // Clear inflight tracking only if this is still the current query
90
83
  if (inflightQueryRef.current === query.trim()) {
91
84
  inflightQueryRef.current = null;
92
85
  setIsDiscovering(false);
@@ -122,28 +115,11 @@ export function useSearch(): UseSearchReturn {
122
115
  [api]
123
116
  );
124
117
 
125
- const executePendingSearch = useCallback(() => {
126
- if (pendingQueryRef.current) {
127
- const queryToExecute = pendingQueryRef.current;
128
- pendingQueryRef.current = null;
129
-
130
- // Update timestamp immediately when scheduling request, not when executing
131
- lastSearchTimeRef.current = Date.now();
132
-
133
- performDiscovery(queryToExecute);
134
- }
135
- }, [performDiscovery]);
136
-
137
118
  const discoverTerms = useCallback(
138
119
  (query: string) => {
139
- // Clear existing debounce timer
140
- if (debounceRef.current) {
141
- clearTimeout(debounceRef.current);
142
- }
143
-
144
- // Clear existing throttle timer
145
- if (throttleTimeoutRef.current) {
146
- clearTimeout(throttleTimeoutRef.current);
120
+ // Clear any existing timer.
121
+ if (searchTimerRef.current) {
122
+ clearTimeout(searchTimerRef.current);
147
123
  }
148
124
 
149
125
  // Clear results when starting new discovery
@@ -160,28 +136,33 @@ export function useSearch(): UseSearchReturn {
160
136
  return;
161
137
  }
162
138
 
163
- // Always store the latest query
139
+ // Always store the latest query for the next execution
164
140
  pendingQueryRef.current = query;
165
141
 
166
- // Debounce first - wait for user to stop typing
167
- debounceRef.current = setTimeout(() => {
168
- const now = Date.now();
169
- const timeSinceLastSearch = now - lastSearchTimeRef.current;
142
+ const now = Date.now();
143
+ const timeSinceLastSearch = now - lastExecutionTimeRef.current;
170
144
 
171
- // If enough time has passed since last search, execute immediately
172
- if (timeSinceLastSearch >= BACKEND_THROTTLE_MS) {
173
- executePendingSearch();
174
- } else {
175
- // Need to wait for throttle - schedule execution
176
- const remainingTime = BACKEND_THROTTLE_MS - timeSinceLastSearch;
177
- throttleTimeoutRef.current = setTimeout(
178
- executePendingSearch,
179
- remainingTime
180
- );
145
+ // Start with the basic debounce delay
146
+ let delay = DEBOUNCE_MS;
147
+
148
+ // If we are inside the throttle window, we must wait longer
149
+ if (timeSinceLastSearch < BACKEND_THROTTLE_MS) {
150
+ const remainingThrottle = BACKEND_THROTTLE_MS - timeSinceLastSearch;
151
+ delay = Math.max(delay, remainingThrottle);
152
+ }
153
+
154
+ searchTimerRef.current = setTimeout(() => {
155
+ // Double check there's a query to run
156
+ if (pendingQueryRef.current !== null) {
157
+ const queryToExecute = pendingQueryRef.current;
158
+
159
+ // Update execution time as soon as the search is initiated
160
+ lastExecutionTimeRef.current = Date.now();
161
+ performDiscovery(queryToExecute);
181
162
  }
182
- }, DEBOUNCE_MS);
163
+ }, delay);
183
164
  },
184
- [executePendingSearch]
165
+ [performDiscovery]
185
166
  );
186
167
 
187
168
  const selectSuggestion = useCallback(
@@ -215,15 +196,12 @@ export function useSearch(): UseSearchReturn {
215
196
  );
216
197
 
217
198
  const clearAll = useCallback(() => {
218
- // Clear all timeouts
219
- if (debounceRef.current) {
220
- clearTimeout(debounceRef.current);
221
- }
222
- if (throttleTimeoutRef.current) {
223
- clearTimeout(throttleTimeoutRef.current);
199
+ // Clear the main search timer
200
+ if (searchTimerRef.current) {
201
+ clearTimeout(searchTimerRef.current);
224
202
  }
225
203
 
226
- // Reset all state including race condition protection
204
+ // Reset all state
227
205
  setSuggestions([]);
228
206
  setIsDiscovering(false);
229
207
  setDiscoverError(null);
@@ -232,6 +210,7 @@ export function useSearch(): UseSearchReturn {
232
210
  setRetrieveError(null);
233
211
  pendingQueryRef.current = null;
234
212
  inflightQueryRef.current = null;
213
+ lastExecutionTimeRef.current = 0; // Reset throttle timer
235
214
  }, []);
236
215
 
237
216
  return {