/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::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, 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;
}
  :root {
    --background: 0 0% 3%;
    --foreground: 0 0% 97%;
    --card: 0 0% 6%;
    --card-foreground: 0 0% 97%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 6%;
    --secondary: 0 0% 13%;
    --secondary-foreground: 0 0% 92%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 68%;
    --accent: 0 0% 16%;
    --accent-foreground: 0 0% 97%;
    --destructive: 0 72% 55%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 17%;
    --input: 0 0% 13%;
    --ring: 0 0% 85%;
    --radius: 1rem;
  }

  .\!light {
    --background: 0 0% 98% !important;
    --foreground: 0 0% 9% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 0 0% 9% !important;
    --primary: 0 0% 8% !important;
    --primary-foreground: 0 0% 98% !important;
    --secondary: 0 0% 92% !important;
    --secondary-foreground: 0 0% 15% !important;
    --muted: 0 0% 93% !important;
    --muted-foreground: 0 0% 38% !important;
    --accent: 0 0% 90% !important;
    --accent-foreground: 0 0% 9% !important;
    --border: 0 0% 84% !important;
    --input: 0 0% 95% !important;
    --ring: 0 0% 25% !important;
  }

  .light {
    --background: 0 0% 98%;
    --foreground: 0 0% 9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 9%;
    --primary: 0 0% 8%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 92%;
    --secondary-foreground: 0 0% 15%;
    --muted: 0 0% 93%;
    --muted-foreground: 0 0% 38%;
    --accent: 0 0% 90%;
    --accent-foreground: 0 0% 9%;
    --border: 0 0% 84%;
    --input: 0 0% 95%;
    --ring: 0 0% 25%;
  }

  html {
    font-size: 18px;
  }

  * {
  border-color: hsl(var(--border));
}

  body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01";
}

  /* faint grid pattern, fading out towards the bottom */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(
        to right,
        rgb(255 255 255 / 0.04) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(
      ellipse 90% 70% at 50% 0%,
      black 30%,
      transparent 85%
    );
    mask-image: radial-gradient(
      ellipse 90% 70% at 50% 0%,
      black 30%,
      transparent 85%
    );
  }
  .\!light body::before {
    background-image: linear-gradient(
        to right,
        rgb(0 0 0 / 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px) !important;
  }
  .light body::before {
    background-image: linear-gradient(
        to right,
        rgb(0 0 0 / 0.05) 1px,
        transparent 1px
      ),
      linear-gradient(to bottom, rgb(0 0 0 / 0.05) 1px, transparent 1px);
  }

  /* soft glow top center */
  body::after {
    content: "";
    position: fixed;
    top: -30vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: 60vh;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      ellipse at center,
      rgb(255 255 255 / 0.06),
      transparent 65%
    );
  }
  .\!light body::after {
    background: radial-gradient(
      ellipse at center,
      rgb(0 0 0 / 0.04),
      transparent 65%
    ) !important;
  }
  .light body::after {
    background: radial-gradient(
      ellipse at center,
      rgb(0 0 0 / 0.04),
      transparent 65%
    );
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.12);
  }
  .\!light ::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 0.18) !important;
  }
  .light ::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 0.18);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.\!absolute {
  position: absolute !important;
}
.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;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-right-3 {
  right: -0.75rem;
}
.-top-1 {
  top: -0.25rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.right-0\.5 {
  right: 0.125rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\/2 {
  top: 50%;
}
.top-14 {
  top: 3.5rem;
}
.top-2 {
  top: 0.5rem;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.-mx-3 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.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-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-\[5px\] {
  margin-top: 5px;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[9\/16\] {
  aspect-ratio: 9/16;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.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-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-36 {
  height: 9rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[3px\] {
  height: 3px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-24 {
  max-height: 6rem;
}
.max-h-28 {
  max-height: 7rem;
}
.max-h-32 {
  max-height: 8rem;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-44 {
  max-height: 11rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-56 {
  max-height: 14rem;
}
.max-h-60 {
  max-height: 15rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-96 {
  max-height: 24rem;
}
.max-h-\[26rem\] {
  max-height: 26rem;
}
.max-h-\[50vh\] {
  max-height: 50vh;
}
.max-h-\[75vh\] {
  max-height: 75vh;
}
.max-h-full {
  max-height: 100%;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-16 {
  min-height: 4rem;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.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-32 {
  width: 8rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[230px\] {
  width: 230px;
}
.w-\[81px\] {
  width: 81px;
}
.w-\[82vw\] {
  width: 82vw;
}
.w-\[90px\] {
  width: 90px;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.w-auto {
  width: auto;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.max-w-24 {
  max-width: 6rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-44 {
  max-width: 11rem;
}
.max-w-72 {
  max-width: 18rem;
}
.max-w-\[1200px\] {
  max-width: 1200px;
}
.max-w-\[190px\] {
  max-width: 190px;
}
.max-w-\[320px\] {
  max-width: 320px;
}
.max-w-\[6rem\] {
  max-width: 6rem;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xs {
  max-width: 20rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-0\.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));
}
.translate-x-\[18px\] {
  --tw-translate-x: 18px;
  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-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));
}
@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 spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-\[1fr_1fr_auto\] {
  grid-template-columns: 1fr 1fr auto;
}
.grid-cols-\[220px_1fr_90px\] {
  grid-template-columns: 220px 1fr 90px;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.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-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.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-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-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-\[2px\] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2px * var(--tw-space-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-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-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}
.border-amber-400\/60 {
  border-color: rgb(251 191 36 / 0.6);
}
.border-blue-400\/25 {
  border-color: rgb(96 165 250 / 0.25);
}
.border-blue-400\/50 {
  border-color: rgb(96 165 250 / 0.5);
}
.border-blue-400\/60 {
  border-color: rgb(96 165 250 / 0.6);
}
.border-blue-400\/70 {
  border-color: rgb(96 165 250 / 0.7);
}
.border-border {
  border-color: hsl(var(--border));
}
.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}
.border-orange-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.border-orange-400\/30 {
  border-color: rgb(251 146 60 / 0.3);
}
.border-orange-400\/40 {
  border-color: rgb(251 146 60 / 0.4);
}
.border-orange-400\/50 {
  border-color: rgb(251 146 60 / 0.5);
}
.border-orange-400\/60 {
  border-color: rgb(251 146 60 / 0.6);
}
.border-orange-400\/70 {
  border-color: rgb(251 146 60 / 0.7);
}
.border-primary {
  border-color: hsl(var(--primary));
}
.border-primary\/30 {
  border-color: hsl(var(--primary) / 0.3);
}
.border-primary\/50 {
  border-color: hsl(var(--primary) / 0.5);
}
.border-primary\/60 {
  border-color: hsl(var(--primary) / 0.6);
}
.border-status-active\/30 {
  border-color: hsl(217 92% 65% / 0.3);
}
.border-status-complete {
  --tw-border-opacity: 1;
  border-color: hsl(156 64% 52% / var(--tw-border-opacity, 1));
}
.border-status-complete\/30 {
  border-color: hsl(156 64% 52% / 0.3);
}
.border-status-complete\/40 {
  border-color: hsl(156 64% 52% / 0.4);
}
.border-status-complete\/50 {
  border-color: hsl(156 64% 52% / 0.5);
}
.border-status-complete\/60 {
  border-color: hsl(156 64% 52% / 0.6);
}
.border-status-error\/30 {
  border-color: hsl(0 84% 65% / 0.3);
}
.border-status-warning\/30 {
  border-color: hsl(36 92% 58% / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/50 {
  border-color: rgb(255 255 255 / 0.5);
}
.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}
.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1);
}
.bg-amber-400\/\[0\.04\] {
  background-color: rgb(251 191 36 / 0.04);
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-background\/95 {
  background-color: hsl(var(--background) / 0.95);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/0 {
  background-color: rgb(0 0 0 / 0);
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.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-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-black\/85 {
  background-color: rgb(0 0 0 / 0.85);
}
.bg-blue-400\/10 {
  background-color: rgb(96 165 250 / 0.1);
}
.bg-blue-400\/15 {
  background-color: rgb(96 165 250 / 0.15);
}
.bg-blue-400\/5 {
  background-color: rgb(96 165 250 / 0.05);
}
.bg-border {
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(var(--card));
}
.bg-current {
  background-color: currentColor;
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-foreground {
  background-color: hsl(var(--foreground));
}
.bg-fuchsia-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(232 121 249 / var(--tw-bg-opacity, 1));
}
.bg-input\/40 {
  background-color: hsl(var(--input) / 0.4);
}
.bg-neutral-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(163 163 163 / var(--tw-bg-opacity, 1));
}
.bg-neutral-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(82 82 82 / var(--tw-bg-opacity, 1));
}
.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.bg-orange-400\/10 {
  background-color: rgb(251 146 60 / 0.1);
}
.bg-orange-400\/15 {
  background-color: rgb(251 146 60 / 0.15);
}
.bg-orange-400\/20 {
  background-color: rgb(251 146 60 / 0.2);
}
.bg-orange-400\/30 {
  background-color: rgb(251 146 60 / 0.3);
}
.bg-orange-400\/5 {
  background-color: rgb(251 146 60 / 0.05);
}
.bg-primary {
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/15 {
  background-color: hsl(var(--primary) / 0.15);
}
.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.bg-secondary\/50 {
  background-color: hsl(var(--secondary) / 0.5);
}
.bg-secondary\/60 {
  background-color: hsl(var(--secondary) / 0.6);
}
.bg-sky-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
}
.bg-status-active {
  --tw-bg-opacity: 1;
  background-color: hsl(217 92% 65% / var(--tw-bg-opacity, 1));
}
.bg-status-active\/10 {
  background-color: hsl(217 92% 65% / 0.1);
}
.bg-status-complete {
  --tw-bg-opacity: 1;
  background-color: hsl(156 64% 52% / var(--tw-bg-opacity, 1));
}
.bg-status-complete\/10 {
  background-color: hsl(156 64% 52% / 0.1);
}
.bg-status-complete\/15 {
  background-color: hsl(156 64% 52% / 0.15);
}
.bg-status-complete\/5 {
  background-color: hsl(156 64% 52% / 0.05);
}
.bg-status-error {
  --tw-bg-opacity: 1;
  background-color: hsl(0 84% 65% / var(--tw-bg-opacity, 1));
}
.bg-status-error\/10 {
  background-color: hsl(0 84% 65% / 0.1);
}
.bg-status-error\/15 {
  background-color: hsl(0 84% 65% / 0.15);
}
.bg-status-error\/5 {
  background-color: hsl(0 84% 65% / 0.05);
}
.bg-status-warning\/10 {
  background-color: hsl(36 92% 58% / 0.1);
}
.bg-status-warning\/5 {
  background-color: hsl(36 92% 58% / 0.05);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(167 139 250 / var(--tw-bg-opacity, 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\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.025\] {
  background-color: rgb(255 255 255 / 0.025);
}
.bg-white\/\[0\.02\] {
  background-color: rgb(255 255 255 / 0.02);
}
.bg-white\/\[0\.035\] {
  background-color: rgb(255 255 255 / 0.035);
}
.bg-status-complete\/\[0\.07\] {
  background-color: hsl(156 64% 52% / 0.07);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.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;
}
.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-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-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-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pl-0\.5 {
  padding-left: 0.125rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-1\.5 {
  padding-right: 0.375rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-\[-2px\] {
  vertical-align: -2px;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.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\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-background {
  color: hsl(var(--background));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.text-card-foreground {
  color: hsl(var(--card-foreground));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-foreground {
  color: hsl(var(--foreground));
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/30 {
  color: hsl(var(--muted-foreground) / 0.3);
}
.text-muted-foreground\/40 {
  color: hsl(var(--muted-foreground) / 0.4);
}
.text-muted-foreground\/50 {
  color: hsl(var(--muted-foreground) / 0.5);
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.text-muted-foreground\/70 {
  color: hsl(var(--muted-foreground) / 0.7);
}
.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-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.text-status-active {
  --tw-text-opacity: 1;
  color: hsl(217 92% 65% / var(--tw-text-opacity, 1));
}
.text-status-complete {
  --tw-text-opacity: 1;
  color: hsl(156 64% 52% / var(--tw-text-opacity, 1));
}
.text-status-error {
  --tw-text-opacity: 1;
  color: hsl(0 84% 65% / var(--tw-text-opacity, 1));
}
.text-status-warning {
  --tw-text-opacity: 1;
  color: hsl(36 92% 58% / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.accent-white {
  accent-color: #fff;
}
.opacity-0 {
  opacity: 0;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-55 {
  opacity: 0.55;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.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_24px_-6px_rgb\(255_255_255\/0\.35\)\] {
  --tw-shadow: 0 0 24px -6px rgb(255 255 255/0.35);
  --tw-shadow-colored: 0 0 24px -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_28px_-8px_hsl\(var\(--primary\)\)\] {
  --tw-shadow: 0 0 28px -8px hsl(var(--primary));
  --tw-shadow-colored: 0 0 28px -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_28px_-8px_rgb\(255_255_255\/0\.4\)\] {
  --tw-shadow: 0 0 28px -8px rgb(255 255 255/0.4);
  --tw-shadow-colored: 0 0 28px -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);
}
.outline {
  outline-style: solid;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-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-\[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-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.label-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: hsl(var(--muted-foreground));
}
[data-skin="tech"] .label-mono {
  font-variant-numeric: tabular-nums; font-size: 11px;
  color: hsl(var(--muted-foreground));
}
.glass {
    border: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
.\!light .glass {
    border-color: rgb(0 0 0 / 0.1) !important;
    background: rgb(255 255 255 / 0.7) !important;
  }
.light .glass {
    border-color: rgb(0 0 0 / 0.1);
    background: rgb(255 255 255 / 0.7);
  }
.glass-strong {
    border: 1px solid rgb(255 255 255 / 0.16);
    background: rgb(255 255 255 / 0.07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
.\!light .glass-strong {
    border-color: rgb(0 0 0 / 0.14) !important;
    background: rgb(0 0 0 / 0.05) !important;
  }
.light .glass-strong {
    border-color: rgb(0 0 0 / 0.14);
    background: rgb(0 0 0 / 0.05);
  }
.card-hero {
    background: linear-gradient(
      160deg,
      rgb(255 255 255 / 0.12) 0%,
      rgb(255 255 255 / 0.04) 40%,
      rgb(255 255 255 / 0.01) 100%
    );
  }
.\!light .card-hero {
    background: linear-gradient(
      160deg,
      rgb(0 0 0 / 0.07) 0%,
      rgb(0 0 0 / 0.03) 40%,
      rgb(0 0 0 / 0.01) 100%
    ) !important;
  }
.light .card-hero {
    background: linear-gradient(
      160deg,
      rgb(0 0 0 / 0.07) 0%,
      rgb(0 0 0 / 0.03) 40%,
      rgb(0 0 0 / 0.01) 100%
    );
  }
.chrome-text {
    background: linear-gradient(180deg, #fff 0%, #d9d9de 55%, #8b8b92 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
.\!light .chrome-text {
    background: linear-gradient(180deg, #3a3a40 0%, #17171a 55%, #000 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
.light .chrome-text {
    background: linear-gradient(180deg, #3a3a40 0%, #17171a 55%, #000 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
/* range slider */
input[type="range"].qvic-range {
  height: 0.375rem;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
}
[data-skin="tech"] input[type="range"].qvic-range {
  border-radius: 9999px; /* Punkte und Abzeichen bleiben rund */
}
input[type="range"].qvic-range {
    background: rgb(255 255 255 / 0.12);
  }
.\!light input[type="range"].qvic-range {
    background: rgb(0 0 0 / 0.15) !important;
  }
.light input[type="range"].qvic-range {
    background: rgb(0 0 0 / 0.15);
  }
input[type="range"].qvic-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1rem;
    width: 1rem;
    border-radius: 9999px;
    background: hsl(var(--primary));
    box-shadow: 0 0 12px rgb(255 255 255 / 0.4);
  }
input[type="range"].qvic-range::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border: 0;
    border-radius: 9999px;
    background: hsl(var(--primary));
  }

/* ---------- Light-mode overrides for hardcoded white/black utilities ---------- */
.light .border-white\/10 {
  border-color: rgb(0 0 0 / 0.1);
}
.light .border-white\/15 {
  border-color: rgb(0 0 0 / 0.14);
}
.light .border-white\/25,
.light .hover\:border-white\/25:hover {
  border-color: rgb(0 0 0 / 0.28);
}
.light .border-white\/50 {
  border-color: rgb(0 0 0 / 0.55);
}
.light .bg-white\/5,
.light .hover\:bg-white\/5:hover {
  background-color: rgb(0 0 0 / 0.04);
}
.light .bg-white\/10,
.light .hover\:bg-white\/10:hover {
  background-color: rgb(0 0 0 / 0.07);
}
.light .bg-white\/15,
.light .hover\:bg-white\/15:hover {
  background-color: rgb(0 0 0 / 0.1);
}
.light .bg-white\/\[0\.035\] {
  background-color: rgb(255 255 255 / 0.7);
}
.light .bg-black\/40 {
  background-color: rgb(255 255 255 / 0.75);
}
.light .bg-black\/50,
.light .bg-black\/60 {
  background-color: rgb(0 0 0 / 0.05);
}
.light .bg-black\/70 {
  background-color: rgb(0 0 0 / 0.35);
}
.light .bg-white\/85,
.light .hover\:bg-white\/85:hover {
  background-color: rgb(0 0 0 / 0.85);
}

/* ==========================================================================
   Technischer Look — zweites Design-System

   Wird über `data-skin="tech"` am <html> eingeschaltet und liegt als Ebene
   ÜBER dem bestehenden Stil. Keine Komponente wurde dafür geändert: wer
   zurückschaltet, bekommt exakt das alte Bild. Light und Dark funktionieren
   in beiden Looks weiter.

   Leitgedanke: alles soll klar erkennbar sein. Mehr Kontrast als in den
   Vorlagen, weil deren Grautöne auf Präsentationsbildern gut aussehen, beim
   stundenlangen Arbeiten aber anstrengen. Kanten statt Rundungen, Versalien
   als Label, Zahlen tabellarisch, Knöpfe gefüllt statt nur umrandet.
   ========================================================================== */

[data-skin="tech"] {
  --radius: 0.125rem;
  /* Deutlich heller als die Vorlage: 68 % Grau liest sich auf Dauer schlecht. */
  --muted-foreground: 0 0% 78%;
  --border: 0 0% 30%;
  --card: 0 0% 5%;
  /* Hauptakzent: dunkles Rot. Es traegt die Hauptaktionen und die
     Akzentkante an Karten. */
  --accent-tech: 357 58% 40%;
  /* Orange bleibt im System, aber mit eigener Aufgabe: laufende Vorgaenge,
     Charakter-Marker, Aufmerksamkeit ohne Dringlichkeit. */
  --accent-warm: 25 79% 50%;
  /* Hilfsaktionen (Kopieren, Oeffnen) — sollen sich klar von Hauptaktionen
     unterscheiden, ohne wie eine Warnung zu wirken. */
  --accent-util: 206 62% 52%;
}

[data-skin="tech"].light {
  --muted-foreground: 0 0% 32%;
  --border: 0 0% 72%;
  --card: 0 0% 100%;
  /* Auf Weiss braucht Rot etwas mehr Tiefe, Blau etwas weniger Helligkeit. */
  --accent-tech: 357 62% 36%;
  --accent-util: 206 68% 42%;
}

/* ---------- Kanten statt Rundungen ---------- */
[data-skin="tech"] .rounded-lg,
[data-skin="tech"] .rounded-md,
[data-skin="tech"] .rounded-xl {
  border-radius: var(--radius);
}
[data-skin="tech"] .rounded-full {
  border-radius: 9999px; /* Punkte und Abzeichen bleiben rund */
}

/* ---------- Glas wird Fläche: Unschärfe kostet Lesbarkeit ---------- */
[data-skin="tech"] .glass,
[data-skin="tech"] .glass-strong {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
}

/* ---------- Labels: größer und heller als vorher ---------- */
[data-skin="tech"] .label-mono {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: hsl(var(--foreground) / 0.72);
}

/* ---------- Zahlen tabellarisch, damit Spalten stehen ---------- */
[data-skin="tech"] .font-mono {
  font-variant-numeric: tabular-nums;
}

/* ---------- Knöpfe: gefüllt, damit sie als Knopf erkennbar sind ---------- */
[data-skin="tech"] button:not([data-ghost]) {
  letter-spacing: 0.02em;
}
[data-skin="tech"] .bg-primary {
  background: hsl(var(--accent-tech));
  color: #fff;
}
[data-skin="tech"] .bg-primary:hover {
  background: hsl(var(--accent-tech) / 0.85);
}
/* Umrandete Knöpfe bekommen eine sichtbare Fläche statt nur einer Linie.
   BEWUSST nur die Outline-Variante der Button-Komponente (border-white/15),
   nicht jedes <button class="border">: ein pauschaler Zugriff hatte höhere
   Spezifität als Tailwinds Zustandsklassen und machte Auswahlzustände
   unsichtbar — gewählt und ungewählt sahen identisch aus. */
[data-skin="tech"] .border-input,
[data-skin="tech"] button.border-white\/15 {
  background: hsl(0 0% 100% / 0.06);
  border-color: hsl(var(--border));
}
[data-skin="tech"].light button.border-white\/15 {
  background: hsl(0 0% 0% / 0.05);
}
[data-skin="tech"] button.border-white\/15:hover {
  background: hsl(0 0% 100% / 0.14);
  border-color: hsl(var(--foreground) / 0.45);
}
[data-skin="tech"].light button.border-white\/15:hover {
  background: hsl(0 0% 0% / 0.1);
}

/* Auswahlzustände klar markieren: `border-white/50` wird in QVIC
   ausschließlich für „dieses Element ist gewählt" verwendet. Im technischen
   Look bekommt es die Akzentfarbe, damit die Wahl auf einen Blick sichtbar
   ist statt nur als etwas hellerer Rahmen. */
[data-skin="tech"] .border-white\/50 {
  border-color: hsl(var(--accent-tech));
  background: hsl(var(--accent-tech) / 0.18);
  color: hsl(var(--foreground));
}

/* ---------- Kleinster Text wird angehoben ---------- */
[data-skin="tech"] .text-\[9px\] { font-size: 10px; }
[data-skin="tech"] .text-\[10px\] { font-size: 11px; }
[data-skin="tech"] .text-\[11px\] { font-size: 12px; }

/* ---------- Schwache Grautöne aufhellen ---------- */
[data-skin="tech"] .text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
[data-skin="tech"] .opacity-60 { opacity: 0.8; }
[data-skin="tech"] .opacity-70 { opacity: 0.85; }
[data-skin="tech"] .border-white\/10 { border-color: hsl(var(--border)); }
[data-skin="tech"] .border-white\/5 { border-color: hsl(var(--border) / 0.7); }

/* ---------- Akzentkante an Karten, wie in den Vorlagen ---------- */
[data-skin="tech"] [data-accent="true"] {
  box-shadow: inset 2px 0 0 0 hsl(var(--accent-tech));
}

/* ---------- Farbrollen: jede Farbe hat eine Aufgabe ----------
   Rot   = Hauptaktion (erzeugen, uebernehmen, starten)
   Blau  = Hilfsaktion (kopieren, oeffnen, ansehen)
   Orange= laeuft gerade / Charakter-Marker
   Gruen = fertig
   Damit ist an der Farbe ablesbar, was ein Knopf tut — nicht nur am Text. */

[data-skin="tech"] button[data-kind="utility"] {
  border-color: hsl(var(--accent-util) / 0.5);
  color: hsl(var(--accent-util));
  background: hsl(var(--accent-util) / 0.1);
}
[data-skin="tech"] button[data-kind="utility"]:hover {
  background: hsl(var(--accent-util) / 0.2);
  color: hsl(var(--accent-util));
}

/* Laufende Vorgaenge behalten Orange. */
[data-skin="tech"] .animate-spin {
  color: hsl(var(--accent-warm));
}
/* Der Talking-Head-Marker bleibt orange — er ist kein Knopf, sondern
   eine Zuordnung. */
[data-skin="tech"] .border-orange-400\/50 {
  border-color: hsl(var(--accent-warm) / 0.6);
}
[data-skin="tech"] .bg-orange-400\/5 {
  background: hsl(var(--accent-warm) / 0.08);
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.hover\:border-blue-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}
.hover\:border-blue-400\/40:hover {
  border-color: rgb(96 165 250 / 0.4);
}
.hover\:border-orange-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.hover\:border-orange-400\/40:hover {
  border-color: rgb(251 146 60 / 0.4);
}
.hover\:border-primary\/40:hover {
  border-color: hsl(var(--primary) / 0.4);
}
.hover\:border-primary\/60:hover {
  border-color: hsl(var(--primary) / 0.6);
}
.hover\:border-status-complete\/70:hover {
  border-color: hsl(156 64% 52% / 0.7);
}
.hover\:border-status-error\/50:hover {
  border-color: hsl(0 84% 65% / 0.5);
}
.hover\:border-white\/25:hover {
  border-color: rgb(255 255 255 / 0.25);
}
.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-orange-400\/10:hover {
  background-color: rgb(251 146 60 / 0.1);
}
.hover\:bg-primary\/85:hover {
  background-color: hsl(var(--primary) / 0.85);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}
.hover\:bg-status-complete\/15:hover {
  background-color: hsl(156 64% 52% / 0.15);
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/50:hover {
  background-color: rgb(255 255 255 / 0.5);
}
.hover\:text-amber-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.hover\:text-blue-400:hover {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}
.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.hover\:text-orange-400:hover {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.hover\:text-status-complete\/50:hover {
  color: hsl(156 64% 52% / 0.5);
}
.hover\:text-status-error:hover {
  --tw-text-opacity: 1;
  color: hsl(0 84% 65% / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:opacity-100:hover {
  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-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.active\:bg-white\/10:active {
  background-color: rgb(255 255 255 / 0.1);
}
.active\:bg-white\/5:active {
  background-color: rgb(255 255 255 / 0.05);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:opacity-30:disabled {
  opacity: 0.3;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.group:hover .group-hover\:text-foreground {
  color: hsl(var(--foreground));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 640px) {

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {

  .lg\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (min-width: 1280px) {

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&\>option\]\:bg-card>option {
  background-color: hsl(var(--card));
}