diff --git a/out.css b/out.css new file mode 100644 index 000000000..0d448d247 --- /dev/null +++ b/out.css @@ -0,0 +1,6979 @@ +*, ::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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::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: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +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; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden]:where(:not([hidden="until-found"])) { + display: none; +} + +* { + scrollbar-color: initial; + scrollbar-width: initial; +} + +*:focus { + outline: none; +} + +*:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +.\!container { + width: 100% !important; +} + +.container { + width: 100%; +} + +@media (min-width: 640px) { + .\!container { + max-width: 640px !important; + } + + .container { + max-width: 640px; + } +} + +@media (min-width: 768px) { + .\!container { + max-width: 768px !important; + } + + .container { + max-width: 768px; + } +} + +@media (min-width: 1024px) { + .\!container { + max-width: 1024px !important; + } + + .container { + max-width: 1024px; + } +} + +@media (min-width: 1280px) { + .\!container { + max-width: 1280px !important; + } + + .container { + max-width: 1280px; + } +} + +@media (min-width: 1536px) { + .\!container { + max-width: 1536px !important; + } + + .container { + max-width: 1536px; + } +} + +.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; +} + +.\!visible { + visibility: visible !important; +} + +.visible { + visibility: visible; +} + +.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\.5 { + bottom: -0.125rem; +} + +.-left-\[21px\] { + left: -21px; +} + +.-right-0\.5 { + right: -0.125rem; +} + +.-right-10 { + right: -2.5rem; +} + +.-top-0\.5 { + top: -0.125rem; +} + +.-top-12 { + top: -3rem; +} + +.bottom-0 { + bottom: 0px; +} + +.bottom-1\/4 { + bottom: 25%; +} + +.bottom-4 { + bottom: 1rem; +} + +.bottom-6 { + bottom: 1.5rem; +} + +.bottom-8 { + bottom: 2rem; +} + +.bottom-full { + bottom: 100%; +} + +.left-0 { + left: 0px; +} + +.left-1 { + left: 0.25rem; +} + +.left-1\/2 { + left: 50%; +} + +.left-1\/4 { + left: 25%; +} + +.left-3 { + left: 0.75rem; +} + +.left-4 { + left: 1rem; +} + +.right-0 { + right: 0px; +} + +.right-1\/4 { + right: 25%; +} + +.right-2 { + right: 0.5rem; +} + +.right-3 { + right: 0.75rem; +} + +.right-4 { + right: 1rem; +} + +.right-5 { + right: 1.25rem; +} + +.right-6 { + right: 1.5rem; +} + +.right-8 { + right: 2rem; +} + +.top-0 { + top: 0px; +} + +.top-1 { + top: 0.25rem; +} + +.top-1\/2 { + top: 50%; +} + +.top-1\/4 { + top: 25%; +} + +.top-10 { + top: 2.5rem; +} + +.top-2 { + top: 0.5rem; +} + +.top-2\.5 { + top: 0.625rem; +} + +.top-3 { + top: 0.75rem; +} + +.top-4 { + top: 1rem; +} + +.top-5 { + top: 1.25rem; +} + +.top-6 { + top: 1.5rem; +} + +.top-8 { + top: 2rem; +} + +.top-full { + top: 100%; +} + +.z-0 { + z-index: 0; +} + +.z-10 { + z-index: 10; +} + +.z-20 { + z-index: 20; +} + +.z-40 { + z-index: 40; +} + +.z-50 { + z-index: 50; +} + +.z-\[100\] { + z-index: 100; +} + +.z-\[110\] { + z-index: 110; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + +.m-3 { + margin: 0.75rem; +} + +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} + +.mx-4 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mx-auto { + margin-left: auto; + margin-right: auto; +} + +.mb-0\.5 { + margin-bottom: 0.125rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.mb-1\.5 { + margin-bottom: 0.375rem; +} + +.mb-10 { + margin-bottom: 2.5rem; +} + +.mb-12 { + margin-bottom: 3rem; +} + +.mb-14 { + margin-bottom: 3.5rem; +} + +.mb-16 { + margin-bottom: 4rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mb-3 { + margin-bottom: 0.75rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-5 { + margin-bottom: 1.25rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mb-8 { + margin-bottom: 2rem; +} + +.mb-\[3px\] { + margin-bottom: 3px; +} + +.ml-0 { + margin-left: 0px; +} + +.ml-1 { + margin-left: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.ml-3 { + margin-left: 0.75rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.ml-5 { + margin-left: 1.25rem; +} + +.mr-1 { + margin-right: 0.25rem; +} + +.mr-1\.5 { + margin-right: 0.375rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mt-0\.5 { + margin-top: 0.125rem; +} + +.mt-1 { + margin-top: 0.25rem; +} + +.mt-1\.5 { + margin-top: 0.375rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + +.mt-12 { + margin-top: 3rem; +} + +.mt-14 { + margin-top: 3.5rem; +} + +.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; +} + +.mt-auto { + margin-top: auto; +} + +.mt-px { + margin-top: 1px; +} + +.line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.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; +} + +.contents { + display: contents; +} + +.hidden { + display: none; +} + +.aspect-\[1200\/630\] { + aspect-ratio: 1200/630; +} + +.aspect-\[4\/3\] { + aspect-ratio: 4/3; +} + +.aspect-square { + aspect-ratio: 1 / 1; +} + +.h-0\.5 { + height: 0.125rem; +} + +.h-1 { + height: 0.25rem; +} + +.h-1\.5 { + height: 0.375rem; +} + +.h-10 { + height: 2.5rem; +} + +.h-11 { + height: 2.75rem; +} + +.h-12 { + height: 3rem; +} + +.h-14 { + height: 3.5rem; +} + +.h-16 { + height: 4rem; +} + +.h-2 { + height: 0.5rem; +} + +.h-2\.5 { + height: 0.625rem; +} + +.h-20 { + height: 5rem; +} + +.h-24 { + height: 6rem; +} + +.h-28 { + height: 7rem; +} + +.h-3 { + height: 0.75rem; +} + +.h-3\.5 { + height: 0.875rem; +} + +.h-32 { + height: 8rem; +} + +.h-36 { + height: 9rem; +} + +.h-4 { + height: 1rem; +} + +.h-40 { + height: 10rem; +} + +.h-44 { + height: 11rem; +} + +.h-48 { + height: 12rem; +} + +.h-5 { + height: 1.25rem; +} + +.h-52 { + height: 13rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-64 { + height: 16rem; +} + +.h-7 { + height: 1.75rem; +} + +.h-72 { + height: 18rem; +} + +.h-8 { + height: 2rem; +} + +.h-80 { + height: 20rem; +} + +.h-9 { + height: 2.25rem; +} + +.h-96 { + height: 24rem; +} + +.h-\[110px\] { + height: 110px; +} + +.h-\[140px\] { + height: 140px; +} + +.h-\[180px\] { + height: 180px; +} + +.h-\[200px\] { + height: 200px; +} + +.h-\[220px\] { + height: 220px; +} + +.h-\[230px\] { + height: 230px; +} + +.h-\[240px\] { + height: 240px; +} + +.h-\[260px\] { + height: 260px; +} + +.h-\[270px\] { + height: 270px; +} + +.h-\[300px\] { + height: 300px; +} + +.h-\[320px\] { + height: 320px; +} + +.h-\[34px\] { + height: 34px; +} + +.h-\[360px\] { + height: 360px; +} + +.h-\[60px\] { + height: 60px; +} + +.h-\[88px\] { + height: 88px; +} + +.h-auto { + height: auto; +} + +.h-full { + height: 100%; +} + +.h-px { + height: 1px; +} + +.h-screen { + height: 100vh; +} + +.max-h-32 { + max-height: 8rem; +} + +.max-h-48 { + max-height: 12rem; +} + +.max-h-64 { + max-height: 16rem; +} + +.max-h-72 { + max-height: 18rem; +} + +.max-h-96 { + max-height: 24rem; +} + +.max-h-\[320px\] { + max-height: 320px; +} + +.max-h-\[520px\] { + max-height: 520px; +} + +.min-h-12 { + min-height: 3rem; +} + +.min-h-20 { + min-height: 5rem; +} + +.min-h-6 { + min-height: 1.5rem; +} + +.min-h-\[100px\] { + min-height: 100px; +} + +.min-h-\[128px\] { + min-height: 128px; +} + +.min-h-\[150px\] { + min-height: 150px; +} + +.min-h-\[250px\] { + min-height: 250px; +} + +.min-h-\[260px\] { + min-height: 260px; +} + +.min-h-\[300px\] { + min-height: 300px; +} + +.min-h-\[320px\] { + min-height: 320px; +} + +.min-h-\[32px\] { + min-height: 32px; +} + +.min-h-\[420px\] { + min-height: 420px; +} + +.min-h-\[450px\] { + min-height: 450px; +} + +.min-h-\[520px\] { + min-height: 520px; +} + +.min-h-\[60px\] { + min-height: 60px; +} + +.min-h-\[60vh\] { + min-height: 60vh; +} + +.min-h-\[65px\] { + min-height: 65px; +} + +.min-h-\[700px\] { + min-height: 700px; +} + +.min-h-\[80px\] { + min-height: 80px; +} + +.min-h-screen { + min-height: 100vh; +} + +.w-0 { + width: 0px; +} + +.w-1 { + width: 0.25rem; +} + +.w-1\.5 { + width: 0.375rem; +} + +.w-1\/2 { + width: 50%; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-10 { + width: 2.5rem; +} + +.w-12 { + width: 3rem; +} + +.w-14 { + width: 3.5rem; +} + +.w-16 { + width: 4rem; +} + +.w-2 { + width: 0.5rem; +} + +.w-2\.5 { + width: 0.625rem; +} + +.w-20 { + width: 5rem; +} + +.w-24 { + width: 6rem; +} + +.w-28 { + width: 7rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-3\.5 { + width: 0.875rem; +} + +.w-3\/4 { + width: 75%; +} + +.w-32 { + width: 8rem; +} + +.w-36 { + width: 9rem; +} + +.w-4 { + width: 1rem; +} + +.w-40 { + width: 10rem; +} + +.w-48 { + width: 12rem; +} + +.w-5 { + width: 1.25rem; +} + +.w-52 { + width: 13rem; +} + +.w-6 { + width: 1.5rem; +} + +.w-64 { + width: 16rem; +} + +.w-7 { + width: 1.75rem; +} + +.w-72 { + width: 18rem; +} + +.w-8 { + width: 2rem; +} + +.w-80 { + width: 20rem; +} + +.w-9 { + width: 2.25rem; +} + +.w-96 { + width: 24rem; +} + +.w-\[140px\] { + width: 140px; +} + +.w-\[180px\] { + width: 180px; +} + +.w-\[220px\] { + width: 220px; +} + +.w-\[300px\] { + width: 300px; +} + +.w-auto { + width: auto; +} + +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + +.w-full { + width: 100%; +} + +.w-px { + width: 1px; +} + +.min-w-0 { + min-width: 0px; +} + +.min-w-\[200px\] { + min-width: 200px; +} + +.min-w-\[28px\] { + min-width: 28px; +} + +.min-w-\[4\.5rem\] { + min-width: 4.5rem; +} + +.min-w-\[48px\] { + min-width: 48px; +} + +.min-w-\[80px\] { + min-width: 80px; +} + +.max-w-2xl { + max-width: 42rem; +} + +.max-w-32 { + max-width: 8rem; +} + +.max-w-3xl { + max-width: 48rem; +} + +.max-w-4xl { + max-width: 56rem; +} + +.max-w-5xl { + max-width: 64rem; +} + +.max-w-6xl { + max-width: 72rem; +} + +.max-w-7xl { + max-width: 80rem; +} + +.max-w-\[10rem\] { + max-width: 10rem; +} + +.max-w-\[120px\] { + max-width: 120px; +} + +.max-w-\[1400px\] { + max-width: 1400px; +} + +.max-w-\[140px\] { + max-width: 140px; +} + +.max-w-\[1600px\] { + max-width: 1600px; +} + +.max-w-\[200px\] { + max-width: 200px; +} + +.max-w-\[220px\] { + max-width: 220px; +} + +.max-w-\[260px\] { + max-width: 260px; +} + +.max-w-\[60\%\] { + max-width: 60%; +} + +.max-w-\[6rem\] { + max-width: 6rem; +} + +.max-w-\[70\%\] { + max-width: 70%; +} + +.max-w-\[80\%\] { + max-width: 80%; +} + +.max-w-full { + max-width: 100%; +} + +.max-w-lg { + max-width: 32rem; +} + +.max-w-md { + max-width: 28rem; +} + +.max-w-sm { + max-width: 24rem; +} + +.max-w-xl { + max-width: 36rem; +} + +.max-w-xs { + max-width: 20rem; +} + +.flex-1 { + flex: 1 1 0%; +} + +.flex-shrink-0 { + flex-shrink: 0; +} + +.shrink-0 { + flex-shrink: 0; +} + +.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-x-full { + --tw-translate-x: -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)); +} + +.-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-4 { + --tw-translate-x: 1rem; + 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-2 { + --tw-translate-y: 0.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-\[3px\] { + --tw-translate-y: 3px; + 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-90 { + --tw-rotate: -90deg; + 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-95 { + --tw-scale-x: .95; + --tw-scale-y: .95; + 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)); +} + +.animate-\[fadeUp_0\.45s_ease-out\] { + animation: fadeUp 0.45s ease-out; +} + +@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); + } +} + +.animate-bounce { + animation: bounce 1s infinite; +} + +@keyframes fade-in-up { + 0% { + opacity: 0; + transform: translateY(12px); + } + + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-in-up { + animation: fade-in-up 0.4s ease-out both; +} + +@keyframes ping { + 75%, 100% { + transform: scale(2); + opacity: 0; + } +} + +.animate-ping { + animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} + +@keyframes pulse { + 50% { + opacity: .5; + } +} + +.animate-pulse { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; +} + +@keyframes shimmer { + 0% { + background-position: -200% 0; + } + + 100% { + background-position: 200% 0; + } +} + +.animate-shimmer { + animation: shimmer 1.8s ease-in-out infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +.animate-spin { + animation: spin 1s linear infinite; +} + +.cursor-default { + cursor: default; +} + +.cursor-grab { + cursor: grab; +} + +.cursor-help { + cursor: help; +} + +.cursor-not-allowed { + cursor: not-allowed; +} + +.cursor-pointer { + cursor: pointer; +} + +.cursor-wait { + cursor: wait; +} + +.touch-none { + touch-action: none; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.resize-none { + resize: none; +} + +.resize-y { + resize: vertical; +} + +.resize { + resize: both; +} + +.scroll-mt-24 { + scroll-margin-top: 6rem; +} + +.scroll-mt-28 { + scroll-margin-top: 7rem; +} + +.auto-rows-max { + grid-auto-rows: max-content; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-cols-10 { + grid-template-columns: repeat(10, 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)); +} + +.grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); +} + +.grid-cols-\[1fr_auto_1fr\] { + grid-template-columns: 1fr auto 1fr; +} + +.grid-cols-\[72px_1fr_110px_110px\] { + grid-template-columns: 72px 1fr 110px 110px; +} + +.flex-row { + flex-direction: row; +} + +.flex-row-reverse { + flex-direction: row-reverse; +} + +.flex-col { + flex-direction: column; +} + +.flex-col-reverse { + flex-direction: column-reverse; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.place-items-center { + place-items: center; +} + +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + +.items-center { + align-items: center; +} + +.items-baseline { + align-items: baseline; +} + +.items-stretch { + align-items: stretch; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.gap-0\.5 { + gap: 0.125rem; +} + +.gap-1 { + gap: 0.25rem; +} + +.gap-1\.5 { + gap: 0.375rem; +} + +.gap-10 { + gap: 2.5rem; +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-2\.5 { + gap: 0.625rem; +} + +.gap-3 { + gap: 0.75rem; +} + +.gap-4 { + gap: 1rem; +} + +.gap-5 { + gap: 1.25rem; +} + +.gap-6 { + gap: 1.5rem; +} + +.gap-8 { + gap: 2rem; +} + +.gap-\[2px\] { + gap: 2px; +} + +.gap-x-4 { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.gap-y-1 { + row-gap: 0.25rem; +} + +.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-y-0\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.125rem * var(--tw-space-y-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-1\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); +} + +.space-y-12 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(3rem * 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-5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1.25rem * 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-\[var\(--border\)\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--border); +} + +.self-start { + align-self: flex-start; +} + +.self-end { + align-self: flex-end; +} + +.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; +} + +.hyphens-auto { + hyphens: auto; +} + +.whitespace-nowrap { + white-space: nowrap; +} + +.whitespace-pre-wrap { + white-space: pre-wrap; +} + +.break-words { + overflow-wrap: break-word; +} + +.break-all { + word-break: break-all; +} + +.rounded { + border-radius: 0.25rem; +} + +.rounded-2xl { + border-radius: 1rem; +} + +.rounded-3xl { + border-radius: 1.5rem; +} + +.rounded-\[3px\] { + border-radius: 3px; +} + +.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-t-2xl { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} + +.rounded-t-full { + border-top-left-radius: 9999px; + border-top-right-radius: 9999px; +} + +.rounded-t-md { + border-top-left-radius: 0.375rem; + border-top-right-radius: 0.375rem; +} + +.rounded-tl-sm { + border-top-left-radius: 0.125rem; +} + +.rounded-tr-sm { + border-top-right-radius: 0.125rem; +} + +.border { + border-width: 1px; +} + +.border-2 { + border-width: 2px; +} + +.border-4 { + border-width: 4px; +} + +.border-b { + border-bottom-width: 1px; +} + +.border-b-0 { + border-bottom-width: 0px; +} + +.border-l { + border-left-width: 1px; +} + +.border-l-2 { + border-left-width: 2px; +} + +.border-r { + border-right-width: 1px; +} + +.border-t { + border-top-width: 1px; +} + +.border-dashed { + border-style: dashed; +} + +.border-\[\#14532d\] { + --tw-border-opacity: 1; + border-color: rgb(20 83 45 / var(--tw-border-opacity, 1)); +} + +.border-\[\#3b82f6\]\/60 { + border-color: rgb(59 130 246 / 0.6); +} + +.border-\[\#7f1d1d\] { + --tw-border-opacity: 1; + border-color: rgb(127 29 29 / var(--tw-border-opacity, 1)); +} + +.border-\[\#ca8a04\]\/25 { + border-color: rgb(202 138 4 / 0.25); +} + +.border-\[\#ca8a04\]\/30 { + border-color: rgb(202 138 4 / 0.3); +} + +.border-\[var\(--accent\)\] { + border-color: var(--accent); +} + +.border-\[var\(--border\)\] { + border-color: var(--border); +} + +.border-\[var\(--card-muted\)\] { + border-color: var(--card-muted); +} + +.border-\[var\(--destructive\)\] { + border-color: var(--destructive); +} + +.border-\[var\(--destructive-muted-border\)\] { + border-color: var(--destructive-muted-border); +} + +.border-\[var\(--error-border\)\] { + border-color: var(--error-border); +} + +.border-\[var\(--foreground\)\] { + border-color: var(--foreground); +} + +.border-amber-300\/30 { + border-color: rgb(252 211 77 / 0.3); +} + +.border-amber-500\/30 { + border-color: rgb(245 158 11 / 0.3); +} + +.border-amber-700\/50 { + border-color: rgb(180 83 9 / 0.5); +} + +.border-black\/10 { + border-color: rgb(0 0 0 / 0.1); +} + +.border-blue-500 { + --tw-border-opacity: 1; + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); +} + +.border-blue-500\/20 { + border-color: rgb(59 130 246 / 0.2); +} + +.border-blue-500\/30 { + border-color: rgb(59 130 246 / 0.3); +} + +.border-border { + border-color: var(--border); +} + +.border-current { + border-color: currentColor; +} + +.border-emerald-500 { + --tw-border-opacity: 1; + border-color: rgb(16 185 129 / var(--tw-border-opacity, 1)); +} + +.border-emerald-500\/20 { + border-color: rgb(16 185 129 / 0.2); +} + +.border-emerald-500\/30 { + border-color: rgb(16 185 129 / 0.3); +} + +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); +} + +.border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); +} + +.border-gray-500\/20 { + border-color: rgb(107 114 128 / 0.2); +} + +.border-green-500\/20 { + border-color: rgb(34 197 94 / 0.2); +} + +.border-indigo-500\/20 { + border-color: rgb(99 102 241 / 0.2); +} + +.border-indigo-500\/30 { + border-color: rgb(99 102 241 / 0.3); +} + +.border-orange-400\/30 { + border-color: rgb(251 146 60 / 0.3); +} + +.border-orange-500\/20 { + border-color: rgb(249 115 22 / 0.2); +} + +.border-orange-500\/30 { + border-color: rgb(249 115 22 / 0.3); +} + +.border-pink-500\/20 { + border-color: rgb(236 72 153 / 0.2); +} + +.border-pink-500\/30 { + border-color: rgb(236 72 153 / 0.3); +} + +.border-purple-500\/20 { + border-color: rgb(168 85 247 / 0.2); +} + +.border-purple-500\/30 { + border-color: rgb(168 85 247 / 0.3); +} + +.border-red-400 { + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); +} + +.border-red-500\/20 { + border-color: rgb(239 68 68 / 0.2); +} + +.border-red-500\/30 { + border-color: rgb(239 68 68 / 0.3); +} + +.border-red-500\/40 { + border-color: rgb(239 68 68 / 0.4); +} + +.border-rose-300\/30 { + border-color: rgb(253 164 175 / 0.3); +} + +.border-rose-500\/20 { + border-color: rgb(244 63 94 / 0.2); +} + +.border-slate-400\/50 { + border-color: rgb(148 163 184 / 0.5); +} + +.border-slate-600 { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); +} + +.border-slate-900\/40 { + border-color: rgb(15 23 42 / 0.4); +} + +.border-teal-500\/20 { + border-color: rgb(20 184 166 / 0.2); +} + +.border-transparent { + border-color: transparent; +} + +.border-violet-500 { + --tw-border-opacity: 1; + border-color: rgb(139 92 246 / var(--tw-border-opacity, 1)); +} + +.border-violet-500\/20 { + border-color: rgb(139 92 246 / 0.2); +} + +.border-white\/10 { + border-color: rgb(255 255 255 / 0.1); +} + +.border-white\/20 { + border-color: rgb(255 255 255 / 0.2); +} + +.border-white\/30 { + border-color: rgb(255 255 255 / 0.3); +} + +.border-white\/5 { + border-color: rgb(255 255 255 / 0.05); +} + +.border-yellow-500\/20 { + border-color: rgb(234 179 8 / 0.2); +} + +.border-yellow-500\/30 { + border-color: rgb(234 179 8 / 0.3); +} + +.border-yellow-500\/50 { + border-color: rgb(234 179 8 / 0.5); +} + +.border-t-\[var\(--accent-foreground\)\] { + border-top-color: var(--accent-foreground); +} + +.border-t-\[var\(--foreground\)\] { + border-top-color: var(--foreground); +} + +.border-t-transparent { + border-top-color: transparent; +} + +.border-t-white { + --tw-border-opacity: 1; + border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1)); +} + +.bg-\[\#020817\] { + --tw-bg-opacity: 1; + background-color: rgb(2 8 23 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#0f172a\] { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#0f241a\] { + --tw-bg-opacity: 1; + background-color: rgb(15 36 26 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#111b2f\]\/95 { + background-color: rgb(17 27 47 / 0.95); +} + +.bg-\[\#2a1216\] { + --tw-bg-opacity: 1; + background-color: rgb(42 18 22 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#3b82f6\] { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#ca8a04\] { + --tw-bg-opacity: 1; + background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1)); +} + +.bg-\[\#ca8a04\]\/15 { + background-color: rgb(202 138 4 / 0.15); +} + +.bg-\[color-mix\(in_srgb\2c var\(--accent\)_10\%\2c transparent\)\] { + background-color: color-mix(in srgb,var(--accent) 10%,transparent); +} + +.bg-\[color-mix\(in_srgb\2c var\(--card\)_92\%\2c white_8\%\)\] { + background-color: color-mix(in srgb,var(--card) 92%,white 8%); +} + +.bg-\[var\(--accent\)\] { + background-color: var(--accent); +} + +.bg-\[var\(--accent-soft\)\] { + background-color: var(--accent-soft); +} + +.bg-\[var\(--background\)\] { + background-color: var(--background); +} + +.bg-\[var\(--border\)\] { + background-color: var(--border); +} + +.bg-\[var\(--card\)\] { + background-color: var(--card); +} + +.bg-\[var\(--card-muted\)\] { + background-color: var(--card-muted); +} + +.bg-\[var\(--card-muted\2c var\(--control\)\)\] { + background-color: var(--card-muted,var(--control)); +} + +.bg-\[var\(--control\)\] { + background-color: var(--control); +} + +.bg-\[var\(--destructive\)\] { + background-color: var(--destructive); +} + +.bg-\[var\(--destructive-muted\)\] { + background-color: var(--destructive-muted); +} + +.bg-\[var\(--error\)\] { + background-color: var(--error); +} + +.bg-\[var\(--error-bg\)\] { + background-color: var(--error-bg); +} + +.bg-\[var\(--foreground\)\] { + background-color: var(--foreground); +} + +.bg-\[var\(--muted-foreground\)\] { + background-color: var(--muted-foreground); +} + +.bg-\[var\(--success\)\] { + background-color: var(--success); +} + +.bg-\[var\(--tooltip\)\] { + background-color: var(--tooltip); +} + +.bg-\[var\(--warning\)\] { + background-color: var(--warning); +} + +.bg-amber-300\/10 { + background-color: rgb(252 211 77 / 0.1); +} + +.bg-amber-400 { + --tw-bg-opacity: 1; + background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1)); +} + +.bg-amber-500 { + --tw-bg-opacity: 1; + background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1)); +} + +.bg-amber-500\/10 { + background-color: rgb(245 158 11 / 0.1); +} + +.bg-background { + background-color: var(--background); +} + +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); +} + +.bg-black\/40 { + background-color: rgb(0 0 0 / 0.4); +} + +.bg-black\/50 { + background-color: rgb(0 0 0 / 0.5); +} + +.bg-black\/60 { + background-color: rgb(0 0 0 / 0.6); +} + +.bg-blue-100 { + --tw-bg-opacity: 1; + background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-50 { + --tw-bg-opacity: 1; + background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-500 { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); +} + +.bg-blue-500\/10 { + background-color: rgb(59 130 246 / 0.1); +} + +.bg-blue-500\/15 { + background-color: rgb(59 130 246 / 0.15); +} + +.bg-blue-600 { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); +} + +.bg-card { + background-color: var(--card); +} + +.bg-cyan-300 { + --tw-bg-opacity: 1; + background-color: rgb(103 232 249 / var(--tw-bg-opacity, 1)); +} + +.bg-emerald-100 { + --tw-bg-opacity: 1; + background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1)); +} + +.bg-emerald-50\/10 { + background-color: rgb(236 253 245 / 0.1); +} + +.bg-emerald-500 { + --tw-bg-opacity: 1; + background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); +} + +.bg-emerald-500\/10 { + background-color: rgb(16 185 129 / 0.1); +} + +.bg-emerald-500\/15 { + background-color: rgb(16 185 129 / 0.15); +} + +.bg-gray-100 { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-300 { + --tw-bg-opacity: 1; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-50 { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + +.bg-gray-50\/50 { + background-color: rgb(249 250 251 / 0.5); +} + +.bg-gray-500\/10 { + background-color: rgb(107 114 128 / 0.1); +} + +.bg-gray-900 { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); +} + +.bg-green-100 { + --tw-bg-opacity: 1; + background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); +} + +.bg-green-500\/10 { + background-color: rgb(34 197 94 / 0.1); +} + +.bg-green-600 { + --tw-bg-opacity: 1; + background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); +} + +.bg-indigo-500\/10 { + background-color: rgb(99 102 241 / 0.1); +} + +.bg-muted { + background-color: var(--muted); +} + +.bg-orange-500\/10 { + background-color: rgb(249 115 22 / 0.1); +} + +.bg-orange-500\/15 { + background-color: rgb(249 115 22 / 0.15); +} + +.bg-pink-500\/10 { + background-color: rgb(236 72 153 / 0.1); +} + +.bg-purple-500 { + --tw-bg-opacity: 1; + background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1)); +} + +.bg-purple-500\/10 { + background-color: rgb(168 85 247 / 0.1); +} + +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); +} + +.bg-red-500 { + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); +} + +.bg-red-500\/10 { + background-color: rgb(239 68 68 / 0.1); +} + +.bg-red-500\/15 { + background-color: rgb(239 68 68 / 0.15); +} + +.bg-red-600 { + --tw-bg-opacity: 1; + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); +} + +.bg-red-700 { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.bg-rose-100 { + --tw-bg-opacity: 1; + background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); +} + +.bg-rose-500\/10 { + background-color: rgb(244 63 94 / 0.1); +} + +.bg-rose-500\/5 { + background-color: rgb(244 63 94 / 0.05); +} + +.bg-sky-200 { + --tw-bg-opacity: 1; + background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-700 { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-950 { + --tw-bg-opacity: 1; + background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1)); +} + +.bg-teal-500\/10 { + background-color: rgb(20 184 166 / 0.1); +} + +.bg-transparent { + background-color: transparent; +} + +.bg-violet-500 { + --tw-bg-opacity: 1; + background-color: rgb(139 92 246 / var(--tw-bg-opacity, 1)); +} + +.bg-violet-500\/10 { + background-color: rgb(139 92 246 / 0.1); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.bg-white\/10 { + background-color: rgb(255 255 255 / 0.1); +} + +.bg-white\/20 { + background-color: rgb(255 255 255 / 0.2); +} + +.bg-white\/5 { + background-color: rgb(255 255 255 / 0.05); +} + +.bg-white\/\[0\.02\] { + background-color: rgb(255 255 255 / 0.02); +} + +.bg-white\/\[0\.04\] { + background-color: rgb(255 255 255 / 0.04); +} + +.bg-yellow-500 { + --tw-bg-opacity: 1; + background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); +} + +.bg-yellow-500\/10 { + background-color: rgb(234 179 8 / 0.1); +} + +.bg-yellow-500\/15 { + background-color: rgb(234 179 8 / 0.15); +} + +.bg-zinc-900 { + --tw-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1)); +} + +.bg-\[linear-gradient\(180deg\2c rgba\(129\2c 140\2c 248\2c 0\.06\)\2c transparent_60\%\)\] { + background-image: linear-gradient(180deg,rgba(129,140,248,0.06),transparent 60%); +} + +.bg-\[radial-gradient\(circle_at_top_left\2c rgba\(96\2c 165\2c 250\2c 0\.08\)\2c transparent_30\%\)\2c radial-gradient\(circle_at_top_right\2c rgba\(2\2c 6\2c 23\2c 0\.35\)\2c transparent_28\%\)\] { + background-image: radial-gradient(circle at top left,rgba(96,165,250,0.08),transparent 30%),radial-gradient(circle at top right,rgba(2,6,23,0.35),transparent 28%); +} + +.bg-\[radial-gradient\(circle_at_top_right\2c rgba\(96\2c 165\2c 250\2c 0\.16\)\2c transparent_34\%\)\2c radial-gradient\(circle_at_bottom_left\2c rgba\(59\2c 130\2c 246\2c 0\.1\)\2c transparent_28\%\)\] { + background-image: radial-gradient(circle at top right,rgba(96,165,250,0.16),transparent 34%),radial-gradient(circle at bottom left,rgba(59,130,246,0.1),transparent 28%); +} + +.bg-gradient-to-br { + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} + +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} + +.bg-gradient-to-t { + background-image: linear-gradient(to top, var(--tw-gradient-stops)); +} + +.from-\[var\(--accent\)\] { + --tw-gradient-from: var(--accent) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-\[var\(--foreground\)\] { + --tw-gradient-from: var(--foreground) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-amber-400\/20 { + --tw-gradient-from: rgb(251 191 36 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-500 { + --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-blue-600 { + --tw-gradient-from: #2563eb var(--tw-gradient-from-position); + --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-cyan-500\/20 { + --tw-gradient-from: rgb(6 182 212 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-emerald-400\/20 { + --tw-gradient-from: rgb(52 211 153 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-emerald-500 { + --tw-gradient-from: #10b981 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-emerald-600 { + --tw-gradient-from: #059669 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-fuchsia-400\/20 { + --tw-gradient-from: rgb(232 121 249 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(232 121 249 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-indigo-600 { + --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-orange-300\/20 { + --tw-gradient-from: rgb(253 186 116 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(253 186 116 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-orange-600 { + --tw-gradient-from: #ea580c var(--tw-gradient-from-position); + --tw-gradient-to: rgb(234 88 12 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-pink-600 { + --tw-gradient-from: #db2777 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-500 { + --tw-gradient-from: #a855f7 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-500\/10 { + --tw-gradient-from: rgb(168 85 247 / 0.1) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-purple-600 { + --tw-gradient-from: #9333ea var(--tw-gradient-from-position); + --tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-rose-600 { + --tw-gradient-from: #e11d48 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-sky-400\/20 { + --tw-gradient-from: rgb(56 189 248 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-teal-400\/20 { + --tw-gradient-from: rgb(45 212 191 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-teal-600 { + --tw-gradient-from: #0d9488 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.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); +} + +.from-violet-600 { + --tw-gradient-from: #7c3aed var(--tw-gradient-from-position); + --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-violet-950\/20 { + --tw-gradient-from: rgb(46 16 101 / 0.2) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(46 16 101 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-yellow-600 { + --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.via-\[var\(--border\)\] { + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--border) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-\[var\(--foreground\)\] { + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--foreground) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-black\/5 { + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.05) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-indigo-950\/10 { + --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), rgb(30 27 75 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-slate-900 { + --tw-gradient-to: rgb(15 23 42 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), #0f172a var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.via-transparent { + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.to-\[var\(--accent\)\] { + --tw-gradient-to: var(--accent) var(--tw-gradient-to-position); +} + +.to-\[var\(--muted-foreground\)\] { + --tw-gradient-to: var(--muted-foreground) var(--tw-gradient-to-position); +} + +.to-amber-300\/20 { + --tw-gradient-to: rgb(252 211 77 / 0.2) var(--tw-gradient-to-position); +} + +.to-blue-400 { + --tw-gradient-to: #60a5fa var(--tw-gradient-to-position); +} + +.to-blue-500\/10 { + --tw-gradient-to: rgb(59 130 246 / 0.1) var(--tw-gradient-to-position); +} + +.to-blue-500\/60 { + --tw-gradient-to: rgb(59 130 246 / 0.6) var(--tw-gradient-to-position); +} + +.to-cyan-300\/20 { + --tw-gradient-to: rgb(103 232 249 / 0.2) var(--tw-gradient-to-position); +} + +.to-cyan-500\/20 { + --tw-gradient-to: rgb(6 182 212 / 0.2) var(--tw-gradient-to-position); +} + +.to-emerald-400 { + --tw-gradient-to: #34d399 var(--tw-gradient-to-position); +} + +.to-emerald-500\/20 { + --tw-gradient-to: rgb(16 185 129 / 0.2) var(--tw-gradient-to-position); +} + +.to-emerald-500\/60 { + --tw-gradient-to: rgb(16 185 129 / 0.6) var(--tw-gradient-to-position); +} + +.to-indigo-400 { + --tw-gradient-to: #818cf8 var(--tw-gradient-to-position); +} + +.to-indigo-400\/20 { + --tw-gradient-to: rgb(129 140 248 / 0.2) var(--tw-gradient-to-position); +} + +.to-indigo-600 { + --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position); +} + +.to-lime-400\/20 { + --tw-gradient-to: rgb(163 230 53 / 0.2) var(--tw-gradient-to-position); +} + +.to-orange-400 { + --tw-gradient-to: #fb923c var(--tw-gradient-to-position); +} + +.to-pink-400 { + --tw-gradient-to: #f472b6 var(--tw-gradient-to-position); +} + +.to-purple-400 { + --tw-gradient-to: #c084fc var(--tw-gradient-to-position); +} + +.to-purple-500\/60 { + --tw-gradient-to: rgb(168 85 247 / 0.6) var(--tw-gradient-to-position); +} + +.to-rose-400 { + --tw-gradient-to: #fb7185 var(--tw-gradient-to-position); +} + +.to-rose-500\/20 { + --tw-gradient-to: rgb(244 63 94 / 0.2) var(--tw-gradient-to-position); +} + +.to-sky-400 { + --tw-gradient-to: #38bdf8 var(--tw-gradient-to-position); +} + +.to-teal-400 { + --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position); +} + +.to-transparent { + --tw-gradient-to: transparent var(--tw-gradient-to-position); +} + +.to-yellow-400 { + --tw-gradient-to: #facc15 var(--tw-gradient-to-position); +} + +.bg-clip-text { + -webkit-background-clip: text; + background-clip: text; +} + +.fill-\[var\(--accent\)\] { + fill: var(--accent); +} + +.fill-red-500 { + fill: #ef4444; +} + +.fill-yellow-400 { + fill: #facc15; +} + +.object-contain { + -o-object-fit: contain; + object-fit: contain; +} + +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + +.p-1 { + padding: 0.25rem; +} + +.p-1\.5 { + padding: 0.375rem; +} + +.p-10 { + padding: 2.5rem; +} + +.p-16 { + padding: 4rem; +} + +.p-2 { + padding: 0.5rem; +} + +.p-2\.5 { + padding: 0.625rem; +} + +.p-3 { + padding: 0.75rem; +} + +.p-4 { + padding: 1rem; +} + +.p-5 { + padding: 1.25rem; +} + +.p-6 { + padding: 1.5rem; +} + +.p-8 { + padding: 2rem; +} + +.px-0 { + padding-left: 0px; + padding-right: 0px; +} + +.px-0\.5 { + padding-left: 0.125rem; + padding-right: 0.125rem; +} + +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.px-1\.5 { + padding-left: 0.375rem; + padding-right: 0.375rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.px-2\.5 { + padding-left: 0.625rem; + padding-right: 0.625rem; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.px-3\.5 { + padding-left: 0.875rem; + padding-right: 0.875rem; +} + +.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-0\.5 { + padding-top: 0.125rem; + padding-bottom: 0.125rem; +} + +.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-16 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.py-2\.5 { + padding-top: 0.625rem; + padding-bottom: 0.625rem; +} + +.py-20 { + padding-top: 5rem; + padding-bottom: 5rem; +} + +.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-1 { + padding-bottom: 0.25rem; +} + +.pb-2 { + padding-bottom: 0.5rem; +} + +.pb-4 { + padding-bottom: 1rem; +} + +.pb-5 { + padding-bottom: 1.25rem; +} + +.pb-6 { + padding-bottom: 1.5rem; +} + +.pb-8 { + padding-bottom: 2rem; +} + +.pl-10 { + padding-left: 2.5rem; +} + +.pl-2 { + padding-left: 0.5rem; +} + +.pl-3 { + padding-left: 0.75rem; +} + +.pl-4 { + padding-left: 1rem; +} + +.pr-0 { + padding-right: 0px; +} + +.pr-1 { + padding-right: 0.25rem; +} + +.pr-10 { + padding-right: 2.5rem; +} + +.pr-2 { + padding-right: 0.5rem; +} + +.pr-4 { + padding-right: 1rem; +} + +.pr-6 { + padding-right: 1.5rem; +} + +.pr-8 { + padding-right: 2rem; +} + +.pt-0 { + padding-top: 0px; +} + +.pt-0\.5 { + padding-top: 0.125rem; +} + +.pt-1 { + padding-top: 0.25rem; +} + +.pt-2 { + padding-top: 0.5rem; +} + +.pt-2\.5 { + padding-top: 0.625rem; +} + +.pt-3 { + padding-top: 0.75rem; +} + +.pt-4 { + padding-top: 1rem; +} + +.pt-6 { + padding-top: 1.5rem; +} + +.text-left { + text-align: left; +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.align-middle { + vertical-align: middle; +} + +.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; + line-height: 2rem; +} + +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; +} + +.text-5xl { + font-size: 3rem; + line-height: 1; +} + +.text-6xl { + font-size: 3.75rem; + line-height: 1; +} + +.text-\[0\.9em\] { + font-size: 0.9em; +} + +.text-\[10px\] { + font-size: 10px; +} + +.text-\[10rem\] { + font-size: 10rem; +} + +.text-\[11px\] { + font-size: 11px; +} + +.text-\[12px\] { + font-size: 12px; +} + +.text-\[13px\] { + font-size: 13px; +} + +.text-\[14px\] { + font-size: 14px; +} + +.text-\[9px\] { + font-size: 9px; +} + +.text-\[clamp\(0\.75rem\2c 2\.4vw\2c 0\.875rem\)\] { + font-size: clamp(0.75rem, 2.4vw, 0.875rem); +} + +.text-\[clamp\(1\.5rem\2c 5vw\2c 1\.75rem\)\] { + font-size: clamp(1.5rem, 5vw, 1.75rem); +} + +.text-\[clamp\(4rem\2c 12vw\2c 10rem\)\] { + font-size: clamp(4rem, 12vw, 10rem); +} + +.text-base { + font-size: 1rem; + line-height: 1.5rem; +} + +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + +.font-black { + font-weight: 900; +} + +.font-bold { + font-weight: 700; +} + +.font-extrabold { + font-weight: 800; +} + +.font-medium { + font-weight: 500; +} + +.font-normal { + font-weight: 400; +} + +.font-semibold { + font-weight: 600; +} + +.uppercase { + text-transform: uppercase; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} + +.leading-6 { + line-height: 1.5rem; +} + +.leading-7 { + line-height: 1.75rem; +} + +.leading-8 { + line-height: 2rem; +} + +.leading-\[0\.95\] { + line-height: 0.95; +} + +.leading-none { + line-height: 1; +} + +.leading-relaxed { + line-height: 1.625; +} + +.leading-snug { + line-height: 1.375; +} + +.leading-tight { + line-height: 1.25; +} + +.tracking-\[0\.12em\] { + letter-spacing: 0.12em; +} + +.tracking-\[0\.18em\] { + letter-spacing: 0.18em; +} + +.tracking-\[0\.22em\] { + letter-spacing: 0.22em; +} + +.tracking-\[0\.24em\] { + letter-spacing: 0.24em; +} + +.tracking-\[0\.28em\] { + letter-spacing: 0.28em; +} + +.tracking-\[0\.2em\] { + letter-spacing: 0.2em; +} + +.tracking-normal { + letter-spacing: 0em; +} + +.tracking-tight { + letter-spacing: -0.025em; +} + +.tracking-tighter { + letter-spacing: -0.05em; +} + +.tracking-wide { + letter-spacing: 0.025em; +} + +.tracking-wider { + letter-spacing: 0.05em; +} + +.tracking-widest { + letter-spacing: 0.1em; +} + +.text-\[\#60a5fa\] { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.text-\[\#94a3b8\] { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.text-\[\#bbf7d0\] { + --tw-text-opacity: 1; + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); +} + +.text-\[\#ca8a04\] { + --tw-text-opacity: 1; + color: rgb(202 138 4 / var(--tw-text-opacity, 1)); +} + +.text-\[\#e5eefc\] { + --tw-text-opacity: 1; + color: rgb(229 238 252 / var(--tw-text-opacity, 1)); +} + +.text-\[\#f8fafc\] { + --tw-text-opacity: 1; + color: rgb(248 250 252 / var(--tw-text-opacity, 1)); +} + +.text-\[\#fca5a5\] { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +.text-\[\#fecaca\] { + --tw-text-opacity: 1; + color: rgb(254 202 202 / var(--tw-text-opacity, 1)); +} + +.text-\[var\(--accent\)\] { + color: var(--accent); +} + +.text-\[var\(--accent-foreground\)\] { + color: var(--accent-foreground); +} + +.text-\[var\(--background\)\] { + color: var(--background); +} + +.text-\[var\(--card-foreground\)\] { + color: var(--card-foreground); +} + +.text-\[var\(--destructive\)\] { + color: var(--destructive); +} + +.text-\[var\(--error\)\] { + color: var(--error); +} + +.text-\[var\(--foreground\)\] { + color: var(--foreground); +} + +.text-\[var\(--muted-foreground\)\] { + color: var(--muted-foreground); +} + +.text-\[var\(--success\)\] { + color: var(--success); +} + +.text-\[var\(--success\2c \#16a34a\)\] { + color: var(--success,#16a34a); +} + +.text-\[var\(--tooltip-foreground\)\] { + color: var(--tooltip-foreground); +} + +.text-\[var\(--warning\)\] { + color: var(--warning); +} + +.text-\[var\(--warning\2c \#ca8a04\)\] { + color: var(--warning,#ca8a04); +} + +.text-amber-100 { + --tw-text-opacity: 1; + color: rgb(254 243 199 / var(--tw-text-opacity, 1)); +} + +.text-amber-200 { + --tw-text-opacity: 1; + color: rgb(253 230 138 / var(--tw-text-opacity, 1)); +} + +.text-amber-300 { + --tw-text-opacity: 1; + color: rgb(252 211 77 / var(--tw-text-opacity, 1)); +} + +.text-amber-400 { + --tw-text-opacity: 1; + color: rgb(251 191 36 / var(--tw-text-opacity, 1)); +} + +.text-amber-500 { + --tw-text-opacity: 1; + color: rgb(245 158 11 / var(--tw-text-opacity, 1)); +} + +.text-amber-600 { + --tw-text-opacity: 1; + color: rgb(217 119 6 / var(--tw-text-opacity, 1)); +} + +.text-amber-700 { + --tw-text-opacity: 1; + color: rgb(180 83 9 / var(--tw-text-opacity, 1)); +} + +.text-black { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); +} + +.text-blue-400 { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity, 1)); +} + +.text-blue-700 { + --tw-text-opacity: 1; + color: rgb(29 78 216 / var(--tw-text-opacity, 1)); +} + +.text-card-foreground { + color: var(--card-foreground); +} + +.text-cyan-200 { + --tw-text-opacity: 1; + color: rgb(165 243 252 / var(--tw-text-opacity, 1)); +} + +.text-destructive { + color: var(--destructive); +} + +.text-emerald-400 { + --tw-text-opacity: 1; + color: rgb(52 211 153 / var(--tw-text-opacity, 1)); +} + +.text-emerald-500 { + --tw-text-opacity: 1; + color: rgb(16 185 129 / var(--tw-text-opacity, 1)); +} + +.text-emerald-600 { + --tw-text-opacity: 1; + color: rgb(5 150 105 / var(--tw-text-opacity, 1)); +} + +.text-emerald-700 { + --tw-text-opacity: 1; + color: rgb(4 120 87 / var(--tw-text-opacity, 1)); +} + +.text-foreground { + color: var(--foreground); +} + +.text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); +} + +.text-gray-600 { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.text-gray-700 { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity, 1)); +} + +.text-gray-900 { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity, 1)); +} + +.text-green-400 { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); +} + +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); +} + +.text-green-600 { + --tw-text-opacity: 1; + color: rgb(22 163 74 / var(--tw-text-opacity, 1)); +} + +.text-indigo-400 { + --tw-text-opacity: 1; + color: rgb(129 140 248 / var(--tw-text-opacity, 1)); +} + +.text-indigo-500 { + --tw-text-opacity: 1; + color: rgb(99 102 241 / var(--tw-text-opacity, 1)); +} + +.text-inherit { + color: inherit; +} + +.text-muted-foreground { + color: var(--muted-foreground); +} + +.text-orange-300 { + --tw-text-opacity: 1; + color: rgb(253 186 116 / var(--tw-text-opacity, 1)); +} + +.text-orange-400 { + --tw-text-opacity: 1; + color: rgb(251 146 60 / var(--tw-text-opacity, 1)); +} + +.text-orange-500 { + --tw-text-opacity: 1; + color: rgb(249 115 22 / var(--tw-text-opacity, 1)); +} + +.text-pink-400 { + --tw-text-opacity: 1; + color: rgb(244 114 182 / var(--tw-text-opacity, 1)); +} + +.text-pink-500 { + --tw-text-opacity: 1; + color: rgb(236 72 153 / var(--tw-text-opacity, 1)); +} + +.text-purple-400 { + --tw-text-opacity: 1; + color: rgb(192 132 252 / var(--tw-text-opacity, 1)); +} + +.text-purple-500 { + --tw-text-opacity: 1; + color: rgb(168 85 247 / var(--tw-text-opacity, 1)); +} + +.text-red-300 { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +.text-red-400 { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +} + +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.text-red-500\/50 { + color: rgb(239 68 68 / 0.5); +} + +.text-red-500\/80 { + color: rgb(239 68 68 / 0.8); +} + +.text-red-600 { + --tw-text-opacity: 1; + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); +} + +.text-rose-100 { + --tw-text-opacity: 1; + color: rgb(255 228 230 / var(--tw-text-opacity, 1)); +} + +.text-rose-400 { + --tw-text-opacity: 1; + color: rgb(251 113 133 / var(--tw-text-opacity, 1)); +} + +.text-rose-500 { + --tw-text-opacity: 1; + color: rgb(244 63 94 / var(--tw-text-opacity, 1)); +} + +.text-rose-600 { + --tw-text-opacity: 1; + color: rgb(225 29 72 / var(--tw-text-opacity, 1)); +} + +.text-rose-950 { + --tw-text-opacity: 1; + color: rgb(76 5 25 / var(--tw-text-opacity, 1)); +} + +.text-slate-100 { + --tw-text-opacity: 1; + color: rgb(241 245 249 / var(--tw-text-opacity, 1)); +} + +.text-slate-200 { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity, 1)); +} + +.text-slate-300 { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.text-slate-400 { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.text-slate-50 { + --tw-text-opacity: 1; + color: rgb(248 250 252 / var(--tw-text-opacity, 1)); +} + +.text-slate-950 { + --tw-text-opacity: 1; + color: rgb(2 6 23 / var(--tw-text-opacity, 1)); +} + +.text-teal-400 { + --tw-text-opacity: 1; + color: rgb(45 212 191 / var(--tw-text-opacity, 1)); +} + +.text-transparent { + color: transparent; +} + +.text-violet-400 { + --tw-text-opacity: 1; + color: rgb(167 139 250 / var(--tw-text-opacity, 1)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.text-white\/90 { + color: rgb(255 255 255 / 0.9); +} + +.text-yellow-400 { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity, 1)); +} + +.text-yellow-500 { + --tw-text-opacity: 1; + color: rgb(234 179 8 / var(--tw-text-opacity, 1)); +} + +.text-yellow-600 { + --tw-text-opacity: 1; + color: rgb(202 138 4 / var(--tw-text-opacity, 1)); +} + +.underline { + text-decoration-line: underline; +} + +.underline-offset-2 { + text-underline-offset: 2px; +} + +.underline-offset-4 { + text-underline-offset: 4px; +} + +.accent-\[var\(--accent\)\] { + accent-color: var(--accent); +} + +.opacity-0 { + opacity: 0; +} + +.opacity-100 { + opacity: 1; +} + +.opacity-20 { + opacity: 0.2; +} + +.opacity-25 { + opacity: 0.25; +} + +.opacity-35 { + opacity: 0.35; +} + +.opacity-40 { + opacity: 0.4; +} + +.opacity-50 { + opacity: 0.5; +} + +.opacity-60 { + opacity: 0.6; +} + +.opacity-70 { + opacity: 0.7; +} + +.opacity-75 { + opacity: 0.75; +} + +.opacity-80 { + opacity: 0.8; +} + +.opacity-90 { + opacity: 0.9; +} + +.opacity-\[0\.025\] { + opacity: 0.025; +} + +.opacity-\[0\.02\] { + opacity: 0.02; +} + +.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-\[0_0_15px_rgba\(16\2c 185\2c 129\2c 0\.5\)\] { + --tw-shadow: 0 0 15px rgba(16,185,129,0.5); + --tw-shadow-colored: 0 0 15px 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-\[0_0_15px_rgba\(168\2c 85\2c 247\2c 0\.5\)\] { + --tw-shadow: 0 0 15px rgba(168,85,247,0.5); + --tw-shadow-colored: 0 0 15px 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-\[0_0_15px_rgba\(59\2c 130\2c 246\2c 0\.5\)\] { + --tw-shadow: 0 0 15px rgba(59,130,246,0.5); + --tw-shadow-colored: 0 0 15px 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-\[0_0_15px_rgba\(var\(--accent-rgb\)\2c 0\.15\)\] { + --tw-shadow: 0 0 15px rgba(var(--accent-rgb),0.15); + --tw-shadow-colored: 0 0 15px 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-\[0_0_20px_rgba\(129\2c 140\2c 248\2c 0\.3\)\] { + --tw-shadow: 0 0 20px rgba(129,140,248,0.3); + --tw-shadow-colored: 0 0 20px 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-\[0_0_6px_\#10b981\] { + --tw-shadow: 0 0 6px #10b981; + --tw-shadow-colored: 0 0 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); +} + +.shadow-\[0_0_8px_rgba\(148\2c 163\2c 184\2c 0\.15\)\] { + --tw-shadow: 0 0 8px rgba(148,163,184,0.15); + --tw-shadow-colored: 0 0 8px 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-\[0_0_8px_rgba\(180\2c 83\2c 9\2c 0\.15\)\] { + --tw-shadow: 0 0 8px rgba(180,83,9,0.15); + --tw-shadow-colored: 0 0 8px 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-\[0_0_8px_rgba\(234\2c 179\2c 8\2c 0\.15\)\] { + --tw-shadow: 0 0 8px rgba(234,179,8,0.15); + --tw-shadow-colored: 0 0 8px 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-\[0_12px_30px_-20px_rgba\(59\2c 130\2c 246\2c 0\.8\)\] { + --tw-shadow: 0 12px 30px -20px rgba(59,130,246,0.8); + --tw-shadow-colored: 0 12px 30px -20px 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-\[0_14px_34px_-26px_rgba\(15\2c 23\2c 42\2c 0\.35\)\] { + --tw-shadow: 0 14px 34px -26px rgba(15,23,42,0.35); + --tw-shadow-colored: 0 14px 34px -26px 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-\[0_18px_35px_-24px_rgba\(2\2c 6\2c 23\2c 0\.85\)\] { + --tw-shadow: 0 18px 35px -24px rgba(2,6,23,0.85); + --tw-shadow-colored: 0 18px 35px -24px 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); +} + +.shadow-\[var\(--shadow-soft\)\] { + --tw-shadow-color: var(--shadow-soft); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-amber-500\/10 { + --tw-shadow-color: rgb(245 158 11 / 0.1); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-black\/10 { + --tw-shadow-color: rgb(0 0 0 / 0.1); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-black\/60 { + --tw-shadow-color: rgb(0 0 0 / 0.6); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-blue-500\/20 { + --tw-shadow-color: rgb(59 130 246 / 0.2); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-cyan-950\/30 { + --tw-shadow-color: rgb(8 51 68 / 0.3); + --tw-shadow: var(--tw-shadow-colored); +} + +.shadow-indigo-500\/20 { + --tw-shadow-color: rgb(99 102 241 / 0.2); + --tw-shadow: var(--tw-shadow-colored); +} + +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.outline { + outline-style: solid; +} + +.outline-dashed { + outline-style: dashed; +} + +.outline-2 { + outline-width: 2px; +} + +.outline-offset-2 { + outline-offset: 2px; +} + +.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-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-\[\#ca8a04\] { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity, 1)); +} + +.ring-\[color-mix\(in_srgb\2c var\(--accent\)_20\%\2c transparent\)\] { + --tw-ring-color: color-mix(in srgb,var(--accent) 20%,transparent); +} + +.ring-\[var\(--accent\)\] { + --tw-ring-color: var(--accent); +} + +.ring-\[var\(--border\)\] { + --tw-ring-color: var(--border); +} + +.ring-\[var\(--destructive\)\] { + --tw-ring-color: var(--destructive); +} + +.ring-offset-1 { + --tw-ring-offset-width: 1px; +} + +.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); +} + +.blur-3xl { + --tw-blur: blur(64px); + 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); +} + +.blur-\[120px\] { + --tw-blur: blur(120px); + 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); +} + +.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-md { + --tw-backdrop-blur: blur(12px); + 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-blur-xl { + --tw-backdrop-blur: blur(24px); + 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-\[stroke-dashoffset\] { + transition-property: stroke-dashoffset; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.transition-\[width\] { + transition-property: width; + 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-shadow { + transition-property: box-shadow; + 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-100 { + transition-duration: 100ms; +} + +.duration-1000 { + transition-duration: 1000ms; +} + +.duration-150 { + transition-duration: 150ms; +} + +.duration-200 { + transition-duration: 200ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.duration-500 { + transition-duration: 500ms; +} + +.duration-700 { + transition-duration: 700ms; +} + +.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); +} + +.scrollbar-thin::-webkit-scrollbar-track { + background-color: var(--scrollbar-track); + border-radius: var(--scrollbar-track-radius); +} + +.scrollbar-thin::-webkit-scrollbar-track:hover { + background-color: var(--scrollbar-track-hover, var(--scrollbar-track)); +} + +.scrollbar-thin::-webkit-scrollbar-track:active { + background-color: var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track))); +} + +.scrollbar-thin::-webkit-scrollbar-thumb { + background-color: var(--scrollbar-thumb); + border-radius: var(--scrollbar-thumb-radius); +} + +.scrollbar-thin::-webkit-scrollbar-thumb:hover { + background-color: var(--scrollbar-thumb-hover, var(--scrollbar-thumb)); +} + +.scrollbar-thin::-webkit-scrollbar-thumb:active { + background-color: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb))); +} + +.scrollbar-thin::-webkit-scrollbar-corner { + background-color: var(--scrollbar-corner); + border-radius: var(--scrollbar-corner-radius); +} + +.scrollbar-thin::-webkit-scrollbar-corner:hover { + background-color: var(--scrollbar-corner-hover, var(--scrollbar-corner)); +} + +.scrollbar-thin::-webkit-scrollbar-corner:active { + background-color: var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner))); +} + +.scrollbar-thin { + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial); +} + +.scrollbar-thin::-webkit-scrollbar { + display: block; + width: 8px; + height: 8px; +} + +.scrollbar-track-transparent { + --scrollbar-track: transparent !important; +} + +.\[animation-delay\:2s\] { + animation-delay: 2s; +} + +.\[animation-duration\:3s\] { + animation-duration: 3s; +} + +.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(10rem\2c 1fr\)\)\] { + grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); +} + +:root { + color-scheme: dark; + --background: #050816; + --foreground: #f5f7fb; + --muted: #121a2b; + --muted-foreground: #91a0b7; + --card: #0b1220; + --card-foreground: #f5f7fb; + --card-muted: #111b2f; + --border: #1e2b40; + --accent: #6ba8ff; + --accent-secondary: #95bbff; + --ring: #b8c8ff; + --focus-ring: #b8c8ff; + --success: #22c55e; + --warning: #fbbf24; + --destructive: #fb7185; + --accent-soft: rgba(107, 168, 255, 0.14); + --accent-foreground: #f7fbff; + --control: #142033; + --control-hover: #1a2940; + --tooltip: #10192b; + --tooltip-foreground: #f5f7fb; + --destructive-muted: rgba(251, 113, 133, 0.1); + --destructive-muted-border: rgba(251, 113, 133, 0.28); + --destructive-foreground: #ffffff; + --shadow-soft: 0 12px 30px -20px rgba(4, 12, 29, 0.72); + --shadow-medium: 0 18px 35px -24px rgba(4, 12, 29, 0.82); + --chart-2: #5de39b; + --chart-3: #ffad5c; + --chart-4: #2dd4ff; + --chart-5: #ff6fb1; + --chart-6: #ffd166; + --chart-7: #a78bfa; + --chart-8: #40d9c2; +} + +html[data-theme="classic-dark"], +html.dark { + color-scheme: dark; + --card: #111111; + --card-muted: #1a1a1a; + --border: #2a2a2a; +} + +html[data-theme="modern-light-blue"] { + color-scheme: light; + --background: #f6f8fc; + --foreground: #0f172a; + --muted: #e9eef7; + --muted-foreground: #516079; + --card: #ffffff; + --card-foreground: #0f172a; + --card-muted: #eff4fb; + --border: #d9e2ef; + --accent: #2563eb; + --accent-secondary: #1d4ed8; + --ring: #9cc5ff; + --focus-ring: #2563eb; + --success: #059669; + --warning: #d97706; + --destructive: #dc2626; + --accent-soft: rgba(91, 141, 239, 0.12); + --accent-foreground: #ffffff; + --control: #edf2f8; + --control-hover: #e2e8f0; + --tooltip: #ffffff; + --tooltip-foreground: #0f172a; + --destructive-muted: rgba(220, 38, 38, 0.08); + --destructive-muted-border: rgba(220, 38, 38, 0.22); + --destructive-foreground: #ffffff; + --shadow-soft: 0 12px 30px -20px rgba(81, 96, 121, 0.2); + --shadow-medium: 0 18px 35px -24px rgba(81, 96, 121, 0.26); + --chart-2: #22c55e; + --chart-3: #f59e0b; + --chart-4: #06b6d4; + --chart-5: #ec4899; + --chart-6: #eab308; + --chart-7: #8b5cf6; + --chart-8: #14b8a6; +} + +html[data-theme="nordic-frost"] { + color-scheme: dark; + --background: #07131f; + --foreground: #eaf4ff; + --muted: #111f31; + --muted-foreground: #8fa6be; + --card: #0c1a2a; + --card-foreground: #eaf4ff; + --card-muted: #122436; + --border: #213447; + --accent: #59e3d0; + --accent-secondary: #6ad1ff; + --ring: #8af2e7; + --focus-ring: #8af2e7; + --success: #34d399; + --warning: #fbbf24; + --destructive: #fb7185; + --accent-soft: rgba(89, 227, 208, 0.14); + --accent-foreground: #04111a; + --control: #122031; + --control-hover: #173046; + --tooltip: #0a1624; + --tooltip-foreground: #eaf4ff; + --destructive-muted: rgba(251, 113, 133, 0.1); + --destructive-muted-border: rgba(251, 113, 133, 0.28); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(4, 16, 29, 0.78); + --shadow-medium: 0 24px 45px -28px rgba(4, 16, 29, 0.86); + --chart-2: #67e8f9; + --chart-3: #a5f3fc; + --chart-4: #5eead4; + --chart-5: #34d399; + --chart-6: #22c55e; + --chart-7: #7dd3fc; + --chart-8: #2dd4bf; +} + +html[data-theme="cyberpunk-matrix"] { + color-scheme: dark; + --background: #050608; + --foreground: #e8ffe8; + --muted: #0d140d; + --muted-foreground: #88a388; + --card: #0a100a; + --card-foreground: #e8ffe8; + --card-muted: #101810; + --border: #1c2a1c; + --accent: #6dff76; + --accent-secondary: #b16cff; + --ring: #8dff9a; + --focus-ring: #8dff9a; + --success: #2dd4bf; + --warning: #facc15; + --destructive: #f87171; + --accent-soft: rgba(109, 255, 118, 0.12); + --accent-foreground: #041104; + --control: #0f170f; + --control-hover: #162016; + --tooltip: #0a0f0a; + --tooltip-foreground: #e8ffe8; + --destructive-muted: rgba(248, 113, 113, 0.1); + --destructive-muted-border: rgba(248, 113, 113, 0.28); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(0, 0, 0, 0.85); + --shadow-medium: 0 24px 45px -28px rgba(0, 0, 0, 0.9); + --chart-2: #34d399; + --chart-3: #a78bfa; + --chart-4: #22d3ee; + --chart-5: #f472b6; + --chart-6: #facc15; + --chart-7: #6dff76; + --chart-8: #2dd4bf; +} + +html { + scroll-behavior: smooth; +} + +html, +body { + overscroll-behavior: none; + scroll-behavior: smooth; +} + +.theme-dracula { + --background: #282a36; + --foreground: #f8f8f2; + --muted-foreground: #bd93f9; + --card: #343746; + --card-foreground: #f8f8f2; + --card-muted: #3b3f51; + --border: #44475a; + --accent: #bd93f9; + --accent-secondary: #ff79c6; + --focus-ring: #ff79c6; + --success: #50fa7b; + --warning: #f1fa8c; + --destructive: #ff5555; + --accent-soft: rgba(189, 147, 249, 0.18); + --accent-foreground: #ffffff; + --control: #3b3f51; + --control-hover: #4b5268; + --tooltip: #343746; + --tooltip-foreground: #f8f8f2; + --destructive-muted: rgba(255, 85, 85, 0.12); + --destructive-muted-border: rgba(255, 85, 85, 0.3); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(0, 0, 0, 0.7); + --shadow-medium: 0 24px 45px -28px rgba(0, 0, 0, 0.8); +} + +.theme-nord { + --background: #2e3440; + --foreground: #eceff4; + --muted-foreground: #d8dee9; + --card: #3b4252; + --card-foreground: #eceff4; + --card-muted: #434c5e; + --border: #4c566a; + --accent: #88c0d0; + --accent-secondary: #5e81ac; + --focus-ring: #88c0d0; + --success: #a3be8c; + --warning: #ebcb8b; + --destructive: #bf616a; + --accent-soft: rgba(136, 192, 208, 0.18); + --accent-foreground: #ffffff; + --control: #434c5e; + --control-hover: #4c566a; + --tooltip: #3b4252; + --tooltip-foreground: #eceff4; + --destructive-muted: rgba(191, 97, 106, 0.12); + --destructive-muted-border: rgba(191, 97, 106, 0.3); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(15, 23, 42, 0.8); + --shadow-medium: 0 24px 45px -28px rgba(15, 23, 42, 0.9); +} + +.theme-catppuccin-mocha { + --background: #1e1e2e; + --foreground: #cdd6f4; + --muted-foreground: #bac2de; + --card: #313244; + --card-foreground: #cdd6f4; + --card-muted: #45475a; + --border: #585b70; + --accent: #cba6f7; + --accent-secondary: #f5c2e7; + --focus-ring: #f5c2e7; + --success: #a6e3a1; + --warning: #f9e2af; + --destructive: #f38ba8; + --accent-soft: rgba(203, 166, 247, 0.18); + --accent-foreground: #ffffff; + --control: #45475a; + --control-hover: #585b70; + --tooltip: #313244; + --tooltip-foreground: #cdd6f4; + --destructive-muted: rgba(243, 139, 168, 0.12); + --destructive-muted-border: rgba(243, 139, 168, 0.3); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(0, 0, 0, 0.75); + --shadow-medium: 0 24px 45px -28px rgba(0, 0, 0, 0.85); +} + +.theme-solarized-dark { + --background: #002b36; + --foreground: #eee8d5; + --muted-foreground: #93a1a1; + --card: #073642; + --card-foreground: #eee8d5; + --card-muted: #0b3b49; + --border: #586e75; + --accent: #2aa198; + --accent-secondary: #268bd2; + --focus-ring: #2aa198; + --success: #859900; + --warning: #b58900; + --destructive: #dc322f; + --accent-soft: rgba(42, 161, 152, 0.18); + --accent-foreground: #ffffff; + --control: #1b4d59; + --control-hover: #256472; + --tooltip: #073642; + --tooltip-foreground: #eee8d5; + --destructive-muted: rgba(220, 50, 47, 0.12); + --destructive-muted-border: rgba(220, 50, 47, 0.3); + --destructive-foreground: #ffffff; + --shadow-soft: 0 16px 34px -24px rgba(0, 0, 0, 0.75); + --shadow-medium: 0 24px 45px -28px rgba(0, 0, 0, 0.85); +} + +/* Strip body background on landing page so the dark bg is visible */ + +body:has(.lnd-root) { + background: var(--background) !important; + background-color: var(--background) !important; +} + +/* Strip body background on Year in Code wrapped page */ + +body:has(.wrapped-root) { + background: var(--background) !important; + background-color: var(--background) !important; +} + +body { + background: + radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%), + radial-gradient(circle at 100% 18%, color-mix(in srgb, var(--accent-secondary) 14%, transparent), transparent 30%), + var(--background); + color: var(--foreground); + transition: background-color 200ms ease, color 200ms ease; + overscroll-behavior: none; +} + +.surface-card { + border: 1px solid var(--border); + background: linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, #ffffff 8%), var(--card)); + box-shadow: var(--shadow-soft); +} + +.primary-button { + border: 1px solid color-mix(in srgb, var(--accent) 86%, white 14%); + background: linear-gradient(140deg, var(--accent), var(--accent-secondary)); + color: var(--accent-foreground); + transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; +} + +.primary-button:hover { + transform: translateY(-1px); + box-shadow: var(--shadow-medium); + filter: saturate(1.05); +} + +.secondary-button { + border: 1px solid var(--border); + background: color-mix(in srgb, var(--card) 88%, white 12%); + color: var(--card-foreground); + transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease; +} + +.secondary-button:hover { + transform: translateY(-1px); + border-color: color-mix(in srgb, var(--accent) 50%, var(--border) 50%); + background: color-mix(in srgb, var(--control) 90%, white 10%); +} + +/* Custom slim scrollbar for dashboard widgets */ + +.scrollbar-thin { + scrollbar-width: thin; + scrollbar-color: var(--muted-foreground) transparent; +} + +.scrollbar-thin::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.scrollbar-thin::-webkit-scrollbar-track { + background: transparent; +} + +.scrollbar-thin::-webkit-scrollbar-thumb { + background: var(--muted-foreground); + border-radius: 9999px; +} + +.scrollbar-thin::-webkit-scrollbar-thumb:hover { + background: var(--muted-foreground); +} + +.dark .scrollbar-thin::-webkit-scrollbar-thumb { + background: var(--muted-foreground); +} + +.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover { + background: var(--muted-foreground); +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(16px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-up { + animation: fadeUp 0.7s ease-out; +} + +/* ───────────────────────────────────────── + MICRO-ANIMATION UTILITIES + ───────────────────────────────────────── */ + +/* Staggered animation delays for child elements */ + +.stagger-children>*:nth-child(1) { + animation-delay: 0ms; +} + +.stagger-children>*:nth-child(2) { + animation-delay: 50ms; +} + +.stagger-children>*:nth-child(3) { + animation-delay: 100ms; +} + +.stagger-children>*:nth-child(4) { + animation-delay: 150ms; +} + +.stagger-children>*:nth-child(5) { + animation-delay: 200ms; +} + +.stagger-children>*:nth-child(6) { + animation-delay: 250ms; +} + +.stagger-children>*:nth-child(7) { + animation-delay: 300ms; +} + +.stagger-children>*:nth-child(8) { + animation-delay: 350ms; +} + +.stagger-children>*:nth-child(9) { + animation-delay: 400ms; +} + +.stagger-children>*:nth-child(10) { + animation-delay: 450ms; +} + +/* Shimmer skeleton loading effect */ + +.skeleton-shimmer { + background: linear-gradient(90deg, + var(--card-muted) 0%, + color-mix(in srgb, var(--card-muted) 60%, var(--border) 40%) 50%, + var(--card-muted) 100%); + background-size: 200% 100%; + animation: shimmer 1.8s ease-in-out infinite; +} + +/* Interactive stat cell — hover lift + glow */ + +.stat-cell { + transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease; +} + +.stat-cell:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px -4px rgba(96, 165, 250, 0.15); +} + +/* Interactive list item — subtle left-border reveal + slide */ + +.list-item-hover { + transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease; + border-left: 3px solid transparent; +} + +.list-item-hover:hover { + transform: translateX(4px); + border-left-color: var(--accent); + box-shadow: 0 2px 8px -2px rgba(96, 165, 250, 0.1); +} + +/* Progress bar animated fill */ + +.progress-fill { + transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1); +} + +/* ───────────────────────────────────────── + DARK MODE GLOBAL TYPOGRAPHY + ───────────────────────────────────────── */ + +.dark h1 { + font-family: var(--font-syne, system-ui, sans-serif); + letter-spacing: -0.03em; +} + +/* Slim dark scrollbar matching theme */ + +.dark { + scrollbar-width: thin; + scrollbar-color: #222 transparent; +} + +.dark::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +.dark::-webkit-scrollbar-track { + background: transparent; +} + +.dark::-webkit-scrollbar-thumb { + background: #222; + border-radius: 6px; +} + +.dark::-webkit-scrollbar-thumb:hover { + background: #9ca3af; +} + +/* ───────────────────────────────────────── + LANDING PAGE + ───────────────────────────────────────── */ + +@keyframes lndHeroIn { + from { + opacity: 0; + transform: translateY(24px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes lndTicker { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-50%); + } +} + +.lnd-ticker { + animation: lndTicker 40s linear infinite; +} + +.lnd-root ::-moz-selection { + background: rgba(129, 140, 248, 0.2); + color: #fff; +} + +.lnd-root ::selection { + background: rgba(129, 140, 248, 0.2); + color: #fff; +} + +.lnd-nav-link { + font-family: var(--font-jetbrains, ui-monospace, monospace); + font-size: 12px; + font-weight: 500; + color: var(--muted-foreground); + text-decoration: none; + padding: 6px 14px; + border: 1px solid var(--border); + border-radius: 5px; + transition: all 0.2s; +} + +.lnd-nav-link:hover { + color: var(--foreground); + border-color: var(--muted-foreground); +} + +.lnd-cta-primary { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--font-jetbrains, ui-monospace, monospace); + font-size: 14px; + font-weight: 600; + color: #000; + background: #818cf8; + padding: 12px 24px; + border-radius: 6px; + text-decoration: none; + transition: background 0.2s, transform 0.1s; + transition: all 0.3s ease; +} + +.lnd-cta-primary:hover { + background: #fff; + transform: translateY(-2px); + box-shadow: 0 0 18px rgba(129, 140, 248, 0.5); +} + +.lnd-cta-primary:active { + transform: scale(0.97); +} + +.lnd-cta-secondary { + transition: all 0.3s ease; +} + +.lnd-cta-secondary:hover { + background: #818cf8; + color: #fff; + border-color: #818cf8; + transform: translateY(-2px); +} + +.lnd-cta-secondary { + display: inline-flex; + align-items: center; + gap: 8px; + font-family: var(--font-jetbrains, ui-monospace, monospace); + font-size: 13px; + font-weight: 500; + color: var(--foreground); + background: transparent; + padding: 11px 22px; + border-radius: 6px; + border: 1px solid var(--border); + text-decoration: none; + transition: all 0.2s; +} + +.lnd-cell { + background: color-mix(in srgb, var(--card) 60%, transparent); + border: 1px solid var(--border); + border-radius: 12px; + padding: 18px 20px; + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.05), + var(--shadow-soft); + transition: + background 0.4s cubic-bezier(0.16, 1, 0.3, 1), + border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), + box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); +} + +.lnd-cell:hover { + background: color-mix(in srgb, var(--card) 85%, transparent); + border-color: var(--accent-secondary); + transform: translateY(-2px); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.08), + var(--shadow-medium); +} + +.lnd-heatmap-cell { + cursor: crosshair; +} + +.lnd-about-card { + position: relative; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 8px; + padding: 22px; + min-height: 210px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.lnd-about-card::before { + content: ""; + position: absolute; + inset: -1px; + border-radius: inherit; + padding: 1px; + background: radial-gradient( + 250px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), + rgba(129, 140, 248, 0.5) 0%, + transparent 80% + ); + -webkit-mask: + linear-gradient(#fff 0 0) content-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + opacity: 0; + transition: opacity 0.4s ease; + z-index: 1; +} + +.lnd-about-card:hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(129, 140, 248, 0.25); + transform: translateY(-3px) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.12), + 0 14px 34px rgba(0, 0, 0, 0.28); +} + +.lnd-about-card:hover::before { + opacity: 1; +} + +.lnd-heatmap-cell:hover { + transform: scale(1.6) !important; + box-shadow: 0 0 8px #818cf8; + z-index: 2; + position: relative; +} + +@media (max-width: 640px) { + .lnd-ticker { + animation-duration: 20s !important; + } +} + +/* --- Accessibility Fix: Respect prefers-reduced-motion (WCAG 2.3.3) --- */ + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + .lnd-ticker { + animation: none !important; + } + + .fade-up { + animation: none !important; + opacity: 1 !important; + transform: none !important; + } + + .hover\:scale-105:hover, + .hover\:-translate-y-1:hover { + transform: none !important; + } +} + +@keyframes shimmer { + 100% { + transform: translateX(100%); + } +} + +.animate-shimmer { + animation: shimmer 1.5s infinite; +} + +/* Mouse spotlight enhancement for visibility on all backgrounds */ + +.lnd-root .mouse-spotlight { + pointer-events: none; + z-index: 0; +} + +/* Focus styles for accessibility - landing page specific */ + +.lnd-root button:focus-visible, +.lnd-root a:focus-visible, +.lnd-root [role="button"]:focus-visible { + outline: 3px solid var(--accent); + outline-offset: 2px; + border-radius: 4px; +} + +.placeholder\:text-\[\#64748b\]::-moz-placeholder { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.placeholder\:text-\[\#64748b\]::placeholder { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.placeholder\:text-\[var\(--muted-foreground\)\]::-moz-placeholder { + color: var(--muted-foreground); +} + +.placeholder\:text-\[var\(--muted-foreground\)\]::placeholder { + color: var(--muted-foreground); +} + +.before\:absolute::before { + content: var(--tw-content); + position: absolute; +} + +.before\:inset-0::before { + content: var(--tw-content); + inset: 0px; +} + +.before\:bg-gradient-to-br::before { + content: var(--tw-content); + background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); +} + +.before\:from-white\/5::before { + content: var(--tw-content); + --tw-gradient-from: rgb(255 255 255 / 0.05) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.before\:to-transparent::before { + content: var(--tw-content); + --tw-gradient-to: transparent var(--tw-gradient-to-position); +} + +.before\:opacity-0::before { + content: var(--tw-content); + opacity: 0; +} + +.first\:pt-0:first-child { + padding-top: 0px; +} + +.last\:mb-0:last-child { + margin-bottom: 0px; +} + +.last\:border-0:last-child { + border-width: 0px; +} + +.last\:border-b-0:last-child { + border-bottom-width: 0px; +} + +.last\:pb-0:last-child { + padding-bottom: 0px; +} + +.focus-within\:border-\[var\(--accent\)\]:focus-within { + border-color: var(--accent); +} + +.group:hover .group-hover\:block { + display: block; +} + +.group:hover .group-hover\:w-full { + width: 100%; +} + +.group\/link:hover .group-hover\/link\: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)); +} + +.group:hover .group-hover\:-translate-x-0\.5 { + --tw-translate-x: -0.125rem; + 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)); +} + +.group:hover .group-hover\:-translate-x-1\.5 { + --tw-translate-x: -0.375rem; + 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)); +} + +.group:hover .group-hover\:translate-x-0\.5 { + --tw-translate-x: 0.125rem; + 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)); +} + +.group:hover .group-hover\: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)); +} + +.group:hover .group-hover\:rotate-6 { + --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)); +} + +.group:hover .group-hover\:scale-110 { + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + 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)); +} + +.group:hover .group-hover\:border-indigo-500\/40 { + border-color: rgb(99 102 241 / 0.4); +} + +.group:hover .group-hover\:bg-indigo-500\/20 { + background-color: rgb(99 102 241 / 0.2); +} + +.group:hover .group-hover\:from-blue-500 { + --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position); + --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.group:hover .group-hover\:to-sky-300 { + --tw-gradient-to: #7dd3fc var(--tw-gradient-to-position); +} + +.group:hover .group-hover\:text-\[var\(--accent\)\] { + color: var(--accent); +} + +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + +.group:hover .group-hover\:\[animation-play-state\:paused\] { + animation-play-state: paused; +} + +.group:focus .group-focus\:block { + display: block; +} + +.hover\:z-20:hover { + z-index: 20; +} + +.hover\:-translate-y-0\.5:hover { + --tw-translate-y: -0.125rem; + 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\:-translate-y-1:hover { + --tw-translate-y: -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)); +} + +.hover\:-translate-y-1\.5:hover { + --tw-translate-y: -0.375rem; + 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\:-translate-y-2:hover { + --tw-translate-y: -0.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)); +} + +.hover\:-translate-y-px:hover { + --tw-translate-y: -1px; + 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\:translate-x-1:hover { + --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)); +} + +.hover\:rotate-12:hover { + --tw-rotate: 12deg; + 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\:scale-105:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + 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\:scale-110:hover { + --tw-scale-x: 1.1; + --tw-scale-y: 1.1; + 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\:scale-\[1\.02\]:hover { + --tw-scale-x: 1.02; + --tw-scale-y: 1.02; + 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\:scale-\[1\.03\]:hover { + --tw-scale-x: 1.03; + --tw-scale-y: 1.03; + 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\:scale-\[1\.05\]:hover { + --tw-scale-x: 1.05; + --tw-scale-y: 1.05; + 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\:border-\[\#2563eb\]\/50:hover { + border-color: rgb(37 99 235 / 0.5); +} + +.hover\:border-\[var\(--accent\)\]:hover { + border-color: var(--accent); +} + +.hover\:border-\[var\(--border\)\]:hover { + border-color: var(--border); +} + +.hover\:border-\[var\(--muted-foreground\)\]:hover { + border-color: var(--muted-foreground); +} + +.hover\:border-amber-500\/30:hover { + border-color: rgb(245 158 11 / 0.3); +} + +.hover\:border-blue-300:hover { + --tw-border-opacity: 1; + border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); +} + +.hover\:border-blue-500\/30:hover { + border-color: rgb(59 130 246 / 0.3); +} + +.hover\:border-cyan-300:hover { + --tw-border-opacity: 1; + border-color: rgb(103 232 249 / var(--tw-border-opacity, 1)); +} + +.hover\:border-emerald-500\/30:hover { + border-color: rgb(16 185 129 / 0.3); +} + +.hover\:border-indigo-500\/30:hover { + border-color: rgb(99 102 241 / 0.3); +} + +.hover\:border-indigo-500\/50:hover { + border-color: rgb(99 102 241 / 0.5); +} + +.hover\:border-orange-400\/50:hover { + border-color: rgb(251 146 60 / 0.5); +} + +.hover\:border-purple-500\/30:hover { + border-color: rgb(168 85 247 / 0.3); +} + +.hover\:border-red-500\/50:hover { + border-color: rgb(239 68 68 / 0.5); +} + +.hover\:border-rose-500\/30:hover { + border-color: rgb(244 63 94 / 0.3); +} + +.hover\:bg-\[\#60a5fa\]:hover { + --tw-bg-opacity: 1; + background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-\[var\(--accent\)\]:hover { + background-color: var(--accent); +} + +.hover\:bg-\[var\(--accent-soft\)\]:hover { + background-color: var(--accent-soft); +} + +.hover\:bg-\[var\(--background\)\]:hover { + background-color: var(--background); +} + +.hover\:bg-\[var\(--border\)\]:hover { + background-color: var(--border); +} + +.hover\:bg-\[var\(--card\)\]:hover { + background-color: var(--card); +} + +.hover\:bg-\[var\(--card-muted\)\]:hover { + background-color: var(--card-muted); +} + +.hover\:bg-\[var\(--control\)\]:hover { + background-color: var(--control); +} + +.hover\:bg-\[var\(--control-hover\)\]:hover { + background-color: var(--control-hover); +} + +.hover\:bg-\[var\(--destructive\)\]:hover { + background-color: var(--destructive); +} + +.hover\:bg-\[var\(--destructive-muted\)\]:hover { + background-color: var(--destructive-muted); +} + +.hover\:bg-amber-500\/20:hover { + background-color: rgb(245 158 11 / 0.2); +} + +.hover\:bg-black\/70:hover { + background-color: rgb(0 0 0 / 0.7); +} + +.hover\:bg-blue-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-blue-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-cyan-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(207 250 254 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-gray-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-indigo-500\/20:hover { + background-color: rgb(99 102 241 / 0.2); +} + +.hover\:bg-orange-500\/15:hover { + background-color: rgb(249 115 22 / 0.15); +} + +.hover\:bg-red-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-red-500\/10:hover { + background-color: rgb(239 68 68 / 0.1); +} + +.hover\:bg-red-500\/20:hover { + background-color: rgb(239 68 68 / 0.2); +} + +.hover\:bg-red-700:hover { + --tw-bg-opacity: 1; + background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-red-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-rose-500\/10:hover { + background-color: rgb(244 63 94 / 0.1); +} + +.hover\:bg-white:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.hover\:bg-white\/10:hover { + background-color: rgb(255 255 255 / 0.1); +} + +.hover\:bg-white\/40:hover { + background-color: rgb(255 255 255 / 0.4); +} + +.hover\:bg-white\/5:hover { + background-color: rgb(255 255 255 / 0.05); +} + +.hover\:text-\[\#dbeafe\]:hover { + --tw-text-opacity: 1; + color: rgb(219 234 254 / var(--tw-text-opacity, 1)); +} + +.hover\:text-\[var\(--accent\)\]:hover { + color: var(--accent); +} + +.hover\:text-\[var\(--accent-foreground\)\]:hover { + color: var(--accent-foreground); +} + +.hover\:text-\[var\(--card-foreground\)\]:hover { + color: var(--card-foreground); +} + +.hover\:text-\[var\(--destructive\)\]:hover { + color: var(--destructive); +} + +.hover\:text-\[var\(--error\)\]:hover { + color: var(--error); +} + +.hover\:text-\[var\(--foreground\)\]:hover { + color: var(--foreground); +} + +.hover\:text-foreground:hover { + color: var(--foreground); +} + +.hover\:text-gray-600:hover { + --tw-text-opacity: 1; + color: rgb(75 85 99 / var(--tw-text-opacity, 1)); +} + +.hover\:text-red-300:hover { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity, 1)); +} + +.hover\:text-red-500:hover { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.hover\:text-white:hover { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.hover\:underline:hover { + text-decoration-line: underline; +} + +.hover\:no-underline:hover { + text-decoration-line: none; +} + +.hover\:opacity-100:hover { + opacity: 1; +} + +.hover\:opacity-70:hover { + opacity: 0.7; +} + +.hover\:opacity-80:hover { + opacity: 0.8; +} + +.hover\:opacity-90:hover { + opacity: 0.9; +} + +.hover\:shadow-2xl:hover { + --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); +} + +.hover\:shadow-\[0_0_20px_rgba\(139\2c 92\2c 246\2c 0\.15\)\]:hover { + --tw-shadow: 0 0 20px rgba(139,92,246,0.15); + --tw-shadow-colored: 0 0 20px 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\:shadow-\[0_0_20px_rgba\(16\2c 185\2c 129\2c 0\.15\)\]:hover { + --tw-shadow: 0 0 20px rgba(16,185,129,0.15); + --tw-shadow-colored: 0 0 20px 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\:shadow-\[0_0_20px_rgba\(59\2c 130\2c 246\2c 0\.15\)\]:hover { + --tw-shadow: 0 0 20px rgba(59,130,246,0.15); + --tw-shadow-colored: 0 0 20px 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\:shadow-\[0_0_25px_rgba\(129\2c 140\2c 248\2c 0\.5\)\]:hover { + --tw-shadow: 0 0 25px rgba(129,140,248,0.5); + --tw-shadow-colored: 0 0 25px 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\:shadow-lg:hover { + --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); +} + +.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\:shadow-sm:hover { + --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); +} + +.hover\:shadow-xl:hover { + --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); +} + +.hover\:shadow-\[var\(--shadow-medium\)\]:hover { + --tw-shadow-color: var(--shadow-medium); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:shadow-\[var\(--shadow-soft\)\]:hover { + --tw-shadow-color: var(--shadow-soft); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:shadow-indigo-500\/15:hover { + --tw-shadow-color: rgb(99 102 241 / 0.15); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:shadow-indigo-500\/20:hover { + --tw-shadow-color: rgb(99 102 241 / 0.2); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:shadow-indigo-500\/30:hover { + --tw-shadow-color: rgb(99 102 241 / 0.3); + --tw-shadow: var(--tw-shadow-colored); +} + +.hover\:before\:opacity-100:hover::before { + content: var(--tw-content); + opacity: 1; +} + +.focus\:z-20:focus { + z-index: 20; +} + +.focus\:border-\[\#60a5fa\]:focus { + --tw-border-opacity: 1; + border-color: rgb(96 165 250 / var(--tw-border-opacity, 1)); +} + +.focus\:border-\[var\(--accent\)\]:focus { + border-color: var(--accent); +} + +.focus\:border-gray-500:focus { + --tw-border-opacity: 1; + border-color: rgb(107 114 128 / var(--tw-border-opacity, 1)); +} + +.focus\:border-transparent:focus { + border-color: transparent; +} + +.focus\:bg-\[\#111b2f\]:focus { + --tw-bg-opacity: 1; + background-color: rgb(17 27 47 / var(--tw-bg-opacity, 1)); +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.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-\[var\(--accent\)\]:focus { + --tw-ring-color: var(--accent); +} + +.focus\:ring-\[var\(--heatmap-focus-ring\)\]:focus { + --tw-ring-color: var(--heatmap-focus-ring); +} + +.focus\:ring-\[var\(--primary\)\]:focus { + --tw-ring-color: var(--primary); +} + +.focus\:ring-\[var\(--ring\)\]:focus { + --tw-ring-color: var(--ring); +} + +.focus\:ring-accent:focus { + --tw-ring-color: var(--accent); +} + +.focus\:ring-blue-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-offset-2:focus { + --tw-ring-offset-width: 2px; +} + +.focus-visible\:border-\[var\(--accent\)\]:focus-visible { + border-color: var(--accent); +} + +.focus-visible\:border-cyan-300:focus-visible { + --tw-border-opacity: 1; + border-color: rgb(103 232 249 / var(--tw-border-opacity, 1)); +} + +.focus-visible\:outline-none:focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus-visible\:ring-1:focus-visible { + --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-visible\:ring-2:focus-visible { + --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-visible\:ring-\[var\(--accent\)\]:focus-visible { + --tw-ring-color: var(--accent); +} + +.focus-visible\:ring-\[var\(--heatmap-focus-ring\)\]:focus-visible { + --tw-ring-color: var(--heatmap-focus-ring); +} + +.focus-visible\:ring-\[var\(--ring\)\]:focus-visible { + --tw-ring-color: var(--ring); +} + +.focus-visible\:ring-cyan-300\/30:focus-visible { + --tw-ring-color: rgb(103 232 249 / 0.3); +} + +.focus-visible\:ring-indigo-500:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)); +} + +.focus-visible\:ring-red-500:focus-visible { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); +} + +.focus-visible\:ring-offset-2:focus-visible { + --tw-ring-offset-width: 2px; +} + +.focus-visible\:ring-offset-\[var\(--background\)\]:focus-visible { + --tw-ring-offset-color: var(--background); +} + +.focus-visible\:ring-offset-\[var\(--card\)\]:focus-visible { + --tw-ring-offset-color: var(--card); +} + +.active\:scale-95:active { + --tw-scale-x: .95; + --tw-scale-y: .95; + 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)); +} + +.active\:scale-\[0\.98\]:active { + --tw-scale-x: 0.98; + --tw-scale-y: 0.98; + 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)); +} + +.active\:scale-\[0\.99\]:active { + --tw-scale-x: 0.99; + --tw-scale-y: 0.99; + 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)); +} + +.active\:cursor-grabbing:active { + cursor: grabbing; +} + +.disabled\:pointer-events-none:disabled { + pointer-events: none; +} + +.disabled\:cursor-default:disabled { + cursor: default; +} + +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + +.disabled\:opacity-20:disabled { + opacity: 0.2; +} + +.disabled\:opacity-40:disabled { + opacity: 0.4; +} + +.disabled\:opacity-50:disabled { + opacity: 0.5; +} + +.disabled\:opacity-60:disabled { + opacity: 0.6; +} + +.disabled\:opacity-70:disabled { + opacity: 0.7; +} + +.disabled\:hover\:border-\[var\(--border\)\]:hover:disabled { + border-color: var(--border); +} + +.disabled\:hover\:bg-\[var\(--card\)\]:hover:disabled { + background-color: var(--card); +} + +.disabled\:hover\:text-inherit:hover:disabled { + color: inherit; +} + +.dark\:border-gray-600:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(75 85 99 / var(--tw-border-opacity, 1)); +} + +.dark\:border-gray-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); +} + +.dark\:border-gray-800:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(31 41 55 / var(--tw-border-opacity, 1)); +} + +.dark\:bg-blue-900\/40:is(.dark *) { + background-color: rgb(30 58 138 / 0.4); +} + +.dark\:bg-blue-950\/30:is(.dark *) { + background-color: rgb(23 37 84 / 0.3); +} + +.dark\:bg-emerald-950\/50:is(.dark *) { + background-color: rgb(2 44 34 / 0.5); +} + +.dark\:bg-gray-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-gray-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-green-900\/20:is(.dark *) { + background-color: rgb(20 83 45 / 0.2); +} + +.dark\:bg-red-900\/20:is(.dark *) { + background-color: rgb(127 29 29 / 0.2); +} + +.dark\:bg-white:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-zinc-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-zinc-900:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-zinc-950:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-zinc-950\/20:is(.dark *) { + background-color: rgb(9 9 11 / 0.2); +} + +.dark\:via-white\/10:is(.dark *) { + --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to); +} + +.dark\:text-blue-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(147 197 253 / var(--tw-text-opacity, 1)); +} + +.dark\:text-blue-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(96 165 250 / var(--tw-text-opacity, 1)); +} + +.dark\:text-emerald-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(52 211 153 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-100:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(243 244 246 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity, 1)); +} + +.dark\:text-gray-900:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(17 24 39 / var(--tw-text-opacity, 1)); +} + +.dark\:text-green-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(74 222 128 / var(--tw-text-opacity, 1)); +} + +.dark\:text-red-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); +} + +.dark\:text-rose-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(251 113 133 / var(--tw-text-opacity, 1)); +} + +.dark\:text-white:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.dark\:text-yellow-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(250 204 21 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:border-blue-800:hover:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(30 64 175 / var(--tw-border-opacity, 1)); +} + +.dark\:hover\:bg-blue-900\/60:hover:is(.dark *) { + background-color: rgb(30 58 138 / 0.6); +} + +.dark\:hover\:bg-gray-200:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-gray-700:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-gray-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:bg-red-950\/30:hover:is(.dark *) { + background-color: rgb(69 10 10 / 0.3); +} + +.dark\:hover\:bg-zinc-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:text-gray-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(209 213 219 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:text-white:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +@media (min-width: 640px) { + .sm\:ml-auto { + margin-left: auto; + } + + .sm\:mt-0 { + margin-top: 0px; + } + + .sm\:block { + display: block; + } + + .sm\:hidden { + display: none; + } + + .sm\:min-h-24 { + min-height: 6rem; + } + + .sm\:w-32 { + width: 8rem; + } + + .sm\:w-48 { + width: 12rem; + } + + .sm\:w-auto { + width: auto; + } + + .sm\:min-w-\[140px\] { + min-width: 140px; + } + + .sm\:max-w-\[12rem\] { + max-width: 12rem; + } + + .sm\:max-w-\[180px\] { + max-width: 180px; + } + + .sm\:max-w-\[70\%\] { + max-width: 70%; + } + + .sm\:flex-1 { + flex: 1 1 0%; + } + + .sm\:flex-none { + flex: none; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sm\:grid-cols-\[repeat\(15\2c minmax\(0\2c 1fr\)\)\] { + grid-template-columns: repeat(15,minmax(0,1fr)); + } + + .sm\:flex-row { + flex-direction: row; + } + + .sm\:items-start { + align-items: flex-start; + } + + .sm\:items-center { + align-items: center; + } + + .sm\:justify-end { + justify-content: flex-end; + } + + .sm\:justify-between { + justify-content: space-between; + } + + .sm\:gap-3 { + gap: 0.75rem; + } + + .sm\:gap-8 { + gap: 2rem; + } + + .sm\:self-auto { + align-self: auto; + } + + .sm\:self-center { + align-self: center; + } + + .sm\:rounded-2xl { + border-radius: 1rem; + } + + .sm\:p-10 { + padding: 2.5rem; + } + + .sm\:p-5 { + padding: 1.25rem; + } + + .sm\:p-6 { + padding: 1.5rem; + } + + .sm\:p-8 { + padding: 2rem; + } + + .sm\:px-6 { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .sm\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .sm\:text-left { + text-align: left; + } + + .sm\:text-right { + text-align: right; + } + + .sm\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .sm\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .sm\:text-5xl { + font-size: 3rem; + line-height: 1; + } + + .sm\:text-7xl { + font-size: 4.5rem; + line-height: 1; + } + + .sm\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } + + .sm\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .sm\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } +} + +@media (min-width: 768px) { + .md\:block { + display: block; + } + + .md\:inline { + display: inline; + } + + .md\:flex { + display: flex; + } + + .md\:hidden { + display: none; + } + + .md\:h-auto { + height: auto; + } + + .md\:w-56 { + width: 14rem; + } + + .md\:w-64 { + width: 16rem; + } + + .md\:w-auto { + width: auto; + } + + .md\:min-w-64 { + min-width: 16rem; + } + + .md\:max-w-\[260px\] { + max-width: 260px; + } + + .md\:max-w-none { + max-width: none; + } + + .md\:max-w-xs { + max-width: 20rem; + } + + .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\:grid-cols-\[1fr_auto_1fr\] { + grid-template-columns: 1fr auto 1fr; + } + + .md\:grid-cols-\[80px_1fr_140px_140px_120px\] { + grid-template-columns: 80px 1fr 140px 140px 120px; + } + + .md\:grid-cols-\[repeat\(30\2c minmax\(0\2c 1fr\)\)\] { + grid-template-columns: repeat(30,minmax(0,1fr)); + } + + .md\:flex-row { + flex-direction: row; + } + + .md\:flex-row-reverse { + flex-direction: row-reverse; + } + + .md\:flex-col { + flex-direction: column; + } + + .md\:items-start { + align-items: flex-start; + } + + .md\:items-end { + align-items: flex-end; + } + + .md\:items-center { + align-items: center; + } + + .md\:items-stretch { + align-items: stretch; + } + + .md\:justify-end { + justify-content: flex-end; + } + + .md\:justify-between { + justify-content: space-between; + } + + .md\:self-auto { + align-self: auto; + } + + .md\:rounded-lg { + border-radius: 0.5rem; + } + + .md\:bg-\[var\(--accent\)\] { + background-color: var(--accent); + } + + .md\:p-10 { + padding: 2.5rem; + } + + .md\:p-12 { + padding: 3rem; + } + + .md\:p-5 { + padding: 1.25rem; + } + + .md\:p-6 { + padding: 1.5rem; + } + + .md\:p-8 { + padding: 2rem; + } + + .md\:px-4 { + padding-left: 1rem; + padding-right: 1rem; + } + + .md\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .md\:py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + } + + .md\:py-8 { + padding-top: 2rem; + padding-bottom: 2rem; + } + + .md\:text-right { + text-align: right; + } + + .md\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .md\:text-4xl { + font-size: 2.25rem; + line-height: 2.5rem; + } + + .md\:text-5xl { + font-size: 3rem; + line-height: 1; + } + + .md\:text-base { + font-size: 1rem; + line-height: 1.5rem; + } + + .md\:text-\[var\(--accent-foreground\)\] { + color: var(--accent-foreground); + } +} + +@media (min-width: 1024px) { + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:ml-0 { + margin-left: 0px; + } + + .lg\:block { + display: block; + } + + .lg\:flex { + display: flex; + } + + .lg\:hidden { + display: none; + } + + .lg\:w-auto { + width: auto; + } + + .lg\:w-full { + width: 100%; + } + + .lg\:max-w-xl { + max-width: 36rem; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:grid-cols-\[1\.8fr_1fr_1fr_1fr_1fr\] { + grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; + } + + .lg\:grid-cols-\[280px_1fr\] { + grid-template-columns: 280px 1fr; + } + + .lg\:grid-cols-\[minmax\(0\2c 1\.35fr\)_minmax\(300px\2c 0\.65fr\)\] { + grid-template-columns: minmax(0,1.35fr) minmax(300px,0.65fr); + } + + .lg\:grid-cols-\[minmax\(0\2c 1\.45fr\)_minmax\(280px\2c 0\.95fr\)\] { + grid-template-columns: minmax(0,1.45fr) minmax(280px,0.95fr); + } + + .lg\:grid-cols-\[minmax\(0\2c 1fr\)_auto\] { + grid-template-columns: minmax(0,1fr) auto; + } + + .lg\:flex-row { + flex-direction: row; + } + + .lg\:flex-col { + flex-direction: column; + } + + .lg\:items-start { + align-items: flex-start; + } + + .lg\:items-end { + align-items: flex-end; + } + + .lg\:items-center { + align-items: center; + } + + .lg\:items-stretch { + align-items: stretch; + } + + .lg\:justify-end { + justify-content: flex-end; + } + + .lg\:justify-between { + justify-content: space-between; + } + + .lg\:gap-10 { + gap: 2.5rem; + } + + .lg\:overflow-visible { + overflow: visible; + } + + .lg\:p-8 { + padding: 2rem; + } + + .lg\:px-12 { + padding-left: 3rem; + padding-right: 3rem; + } + + .lg\:px-8 { + padding-left: 2rem; + padding-right: 2rem; + } + + .lg\:py-16 { + padding-top: 4rem; + padding-bottom: 4rem; + } + + .lg\:pb-0 { + padding-bottom: 0px; + } + + .lg\:pt-6 { + padding-top: 1.5rem; + } + + .lg\:text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; + } + + .lg\:text-5xl { + font-size: 3rem; + line-height: 1; + } + + .lg\:text-lg { + font-size: 1.125rem; + line-height: 1.75rem; + } +} + +@media (min-width: 1280px) { + .xl\:col-span-2 { + grid-column: span 2 / span 2; + } + + .xl\:inline { + display: inline; + } + + .xl\:w-auto { + width: auto; + } + + .xl\:min-w-\[200px\] { + min-width: 200px; + } + + .xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xl\:flex-row { + flex-direction: row; + } +} \ No newline at end of file diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 24986fa52..c4aba8950 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -50,7 +50,7 @@ export default async function DashboardPage() { return ( -
+
diff --git a/src/components/ExportButton.tsx b/src/components/ExportButton.tsx index 014875eec..766019548 100644 --- a/src/components/ExportButton.tsx +++ b/src/components/ExportButton.tsx @@ -4,6 +4,8 @@ import { useMemo, useState } from "react"; import { useSession } from "next-auth/react"; import jsPDF from "jspdf"; import autoTable from "jspdf-autotable"; +import ExportModal from "./ExportModal"; +import { Download } from "lucide-react"; import { toast } from "sonner"; interface PRData { @@ -271,6 +273,7 @@ export default function ExportButton() { const [isExportingCSV, setIsExportingCSV] = useState(false); const [isExportingPDF, setIsExportingPDF] = useState(false); const [isExportingJSON, setIsExportingJSON] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const reportName = useMemo( () => session?.githubLogin ?? session?.user?.name ?? "", @@ -717,68 +720,26 @@ export default function ExportButton() { }; return ( -
+ <> - - - -
+ setIsModalOpen(false)} + reportName={reportName} + onLegacyExport={async (type) => { + if (type === "csv") await exportCSV(); + if (type === "pdf") await exportPDF(); + if (type === "json") await exportJSON(); + }} + /> + ); } diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx new file mode 100644 index 000000000..610b8681e --- /dev/null +++ b/src/components/ExportModal.tsx @@ -0,0 +1,283 @@ +"use client"; + +import { useState } from "react"; +import * as htmlToImage from "html-to-image"; +import jsPDF from "jspdf"; +import { Download, LayoutDashboard, FileImage, FileText, Image as ImageIcon, X } from "lucide-react"; + +export interface ExportModalProps { + isOpen: boolean; + onClose: () => void; + onLegacyExport: (type: "csv" | "pdf" | "json") => Promise; + reportName: string; +} + +export default function ExportModal({ isOpen, onClose, onLegacyExport, reportName }: ExportModalProps) { + const [activeTab, setActiveTab] = useState<"visual" | "data">("visual"); + const [visualFormat, setVisualFormat] = useState<"png" | "jpeg" | "pdf">("png"); + const [selectedSection, setSelectedSection] = useState("dashboard-content"); + const [themePreference, setThemePreference] = useState<"current" | "light" | "dark">("current"); + const [isExporting, setIsExporting] = useState(false); + + if (!isOpen) return null; + + const sections = [ + { id: "dashboard-content", name: "Full Dashboard" }, + { id: "streak-tracker", name: "Streak Tracker" }, + { id: "repo-analytics", name: "Repo Analytics" }, + { id: "pr-metrics", name: "PR Metrics" }, + { id: "activity-ring", name: "Activity Ring" }, + { id: "coding-activity-insights", name: "Coding Insights" }, + ]; + + const handleVisualExport = async () => { + setIsExporting(true); + try { + const element = document.getElementById(selectedSection); + if (!element) { + alert("Selected section not found on the page."); + return; + } + + // Small delay to ensure charts (like recharts) have finished animating + await new Promise((resolve) => setTimeout(resolve, 500)); + + const originalTheme = document.documentElement.className; + // eslint-disable-next-line react-hooks/immutability + if (themePreference === "light") document.documentElement.className = "light"; + // eslint-disable-next-line react-hooks/immutability + if (themePreference === "dark") document.documentElement.className = "dark"; + + // Re-trigger layout/paint for theme switch + if (themePreference !== "current") { + await new Promise((resolve) => setTimeout(resolve, 100)); + } + + const cloneConfig = { + quality: 1, + backgroundColor: themePreference === "light" ? "#ffffff" : themePreference === "dark" ? "#0f172a" : undefined, + style: { + transform: "scale(1)", + transformOrigin: "top left" + } + }; + + if (visualFormat === "pdf") { + const dataUrl = await htmlToImage.toPng(element, cloneConfig); + const pdf = new jsPDF("p", "mm", "a4"); + const pdfWidth = pdf.internal.pageSize.getWidth(); + const pdfHeight = (element.offsetHeight * pdfWidth) / element.offsetWidth; + + pdf.addImage(dataUrl, "PNG", 0, 0, pdfWidth, pdfHeight); + pdf.save(`devtrack-visual-${reportName}-${new Date().toISOString().slice(0, 10)}.pdf`); + } else if (visualFormat === "png") { + const dataUrl = await htmlToImage.toPng(element, cloneConfig); + downloadUrl(dataUrl, `devtrack-${reportName}.${visualFormat}`); + } else { + const dataUrl = await htmlToImage.toJpeg(element, cloneConfig); + downloadUrl(dataUrl, `devtrack-${reportName}.${visualFormat}`); + } + + // Restore theme + if (themePreference !== "current") { + // eslint-disable-next-line react-hooks/immutability + document.documentElement.className = originalTheme; + } + } catch (error) { + console.error("Export failed", error); + alert("Failed to export visual report."); + } finally { + setIsExporting(false); + } + }; + + const downloadUrl = (url: string, filename: string) => { + const a = document.createElement("a"); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + }; + + const handleLegacy = async (type: "csv" | "pdf" | "json") => { + setIsExporting(true); + try { + await onLegacyExport(type); + } finally { + setIsExporting(false); + } + }; + + return ( +
+
+ + {/* Header */} +
+

+ + Export Analytics +

+ +
+ + {/* Tabs */} +
+ + +
+ + {/* Content */} +
+ + {activeTab === "visual" ? ( +
+
+ +
+ {sections.map(s => ( + + ))} +
+
+ +
+ +
+ {["current", "light", "dark"].map(t => ( + + ))} +
+
+ +
+ +
+ {["png", "jpeg", "pdf"].map(f => ( + + ))} +
+
+ + +
+ ) : ( +
+
+ Download your analytics as raw data or text-based PDF reports for offline analysis or backup. +
+
+ + + +
+
+ )} +
+
+
+ ); +} diff --git a/src/components/dashboard/SortableDashboardWidget.tsx b/src/components/dashboard/SortableDashboardWidget.tsx index 4fe11ba75..ba1e498a7 100644 --- a/src/components/dashboard/SortableDashboardWidget.tsx +++ b/src/components/dashboard/SortableDashboardWidget.tsx @@ -46,6 +46,7 @@ export default function SortableDashboardWidget({ return (