#comfyui-copilot-plugin,
#comfyui-copilot-image-upload-modal,
#comfyui-copilot-rewrite-expert-modal,
#comfyui-copilot-model-download-modal,
#comfyui-copilot-model-download,
#comfyui-copilot-start-pop-view {
  *, ::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:  ;
  }
  .container {
    width: 100%;
  }
  @media (min-width: 640px) {
    .container {
      max-width: 640px;
    }
  }
  @media (min-width: 768px) {
    .container {
      max-width: 768px;
    }
  }
  @media (min-width: 1024px) {
    .container {
      max-width: 1024px;
    }
  }
  @media (min-width: 1280px) {
    .container {
      max-width: 1280px;
    }
  }
  @media (min-width: 1536px) {
    .container {
      max-width: 1536px;
    }
  }
  .prose {
    --tw-prose-links: inherit;
    --tw-prose-headings: inherit;
  }
  .prose-neutral {
    --tw-prose-links: inherit;
    --tw-prose-headings: inherit;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .pointer-events-auto {
    pointer-events: auto;
  }
  .\!visible {
    visibility: visible !important;
  }
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
  .collapse {
    visibility: collapse;
  }
  .static {
    position: static;
  }
  .fixed {
    position: fixed;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: 0px;
  }
  .inset-y-0 {
    top: 0px;
    bottom: 0px;
  }
  .\!left-auto {
    left: auto !important;
  }
  .\!top-auto {
    top: auto !important;
  }
  .-bottom-1 {
    bottom: -0.25rem;
  }
  .-right-1 {
    right: -0.25rem;
  }
  .-top-1 {
    top: -0.25rem;
  }
  .-top-10 {
    top: -2.5rem;
  }
  .-top-6 {
    top: -1.5rem;
  }
  .bottom-0 {
    bottom: 0px;
  }
  .bottom-2 {
    bottom: 0.5rem;
  }
  .bottom-3 {
    bottom: 0.75rem;
  }
  .bottom-4 {
    bottom: 1rem;
  }
  .bottom-full {
    bottom: 100%;
  }
  .left-0 {
    left: 0px;
  }
  .left-1\/2 {
    left: 50%;
  }
  .left-3 {
    left: 0.75rem;
  }
  .right-0 {
    right: 0px;
  }
  .right-12 {
    right: 3rem;
  }
  .right-16 {
    right: 4rem;
  }
  .right-2 {
    right: 0.5rem;
  }
  .right-3 {
    right: 0.75rem;
  }
  .right-4 {
    right: 1rem;
  }
  .top-0 {
    top: 0px;
  }
  .top-1\/2 {
    top: 50%;
  }
  .top-2 {
    top: 0.5rem;
  }
  .top-3 {
    top: 0.75rem;
  }
  .top-4 {
    top: 1rem;
  }
  .top-\[-12px\] {
    top: -12px;
  }
  .z-10 {
    z-index: 10;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[9999\] {
    z-index: 9999;
  }
  .m-4 {
    margin: 1rem;
  }
  .\!my-0\.5 {
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
  }
  .\!my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .mx-\[1px\] {
    margin-left: 1px;
    margin-right: 1px;
  }
  .mx-\[30px\] {
    margin-left: 30px;
    margin-right: 30px;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .my-\[1px\] {
    margin-top: 1px;
    margin-bottom: 1px;
  }
  .-mb-2 {
    margin-bottom: -0.5rem;
  }
  .-ml-1 {
    margin-left: -0.25rem;
  }
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  .mb-3 {
    margin-bottom: 0.75rem;
  }
  .mb-4 {
    margin-bottom: 1rem;
  }
  .mb-6 {
    margin-bottom: 1.5rem;
  }
  .ml-1 {
    margin-left: 0.25rem;
  }
  .ml-2 {
    margin-left: 0.5rem;
  }
  .ml-3 {
    margin-left: 0.75rem;
  }
  .ml-4 {
    margin-left: 1rem;
  }
  .mr-1 {
    margin-right: 0.25rem;
  }
  .mr-2 {
    margin-right: 0.5rem;
  }
  .mr-3 {
    margin-right: 0.75rem;
  }
  .mt-0 {
    margin-top: 0px;
  }
  .mt-0\.5 {
    margin-top: 0.125rem;
  }
  .mt-1 {
    margin-top: 0.25rem;
  }
  .mt-12 {
    margin-top: 3rem;
  }
  .mt-2 {
    margin-top: 0.5rem;
  }
  .mt-3 {
    margin-top: 0.75rem;
  }
  .mt-4 {
    margin-top: 1rem;
  }
  .mt-6 {
    margin-top: 1.5rem;
  }
  .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-\[3\/4\] {
    aspect-ratio: 3/4;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .h-0 {
    height: 0px;
  }
  .h-1 {
    height: 0.25rem;
  }
  .h-10 {
    height: 2.5rem;
  }
  .h-12 {
    height: 3rem;
  }
  .h-14 {
    height: 3.5rem;
  }
  .h-16 {
    height: 4rem;
  }
  .h-2 {
    height: 0.5rem;
  }
  .h-2\/3 {
    height: 66.666667%;
  }
  .h-20 {
    height: 5rem;
  }
  .h-3 {
    height: 0.75rem;
  }
  .h-3\.5 {
    height: 0.875rem;
  }
  .h-3\/4 {
    height: 75%;
  }
  .h-3\/5 {
    height: 60%;
  }
  .h-4 {
    height: 1rem;
  }
  .h-5 {
    height: 1.25rem;
  }
  .h-6 {
    height: 1.5rem;
  }
  .h-7 {
    height: 1.75rem;
  }
  .h-8 {
    height: 2rem;
  }
  .h-\[24px\] {
    height: 24px;
  }
  .h-\[280px\] {
    height: 280px;
  }
  .h-\[4\.5rem\] {
    height: 4.5rem;
  }
  .h-\[40px\] {
    height: 40px;
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-16 {
    max-height: 4rem;
  }
  .max-h-60 {
    max-height: 15rem;
  }
  .max-h-\[200px\] {
    max-height: 200px;
  }
  .max-h-\[400px\] {
    max-height: 400px;
  }
  .max-h-\[40vh\] {
    max-height: 40vh;
  }
  .max-h-\[80vh\] {
    max-height: 80vh;
  }
  .max-h-\[90vh\] {
    max-height: 90vh;
  }
  .max-h-\[calc\(90vh-2rem\)\] {
    max-height: calc(90vh - 2rem);
  }
  .max-h-full {
    max-height: 100%;
  }
  .min-h-0 {
    min-height: 0px;
  }
  .min-h-\[50px\] {
    min-height: 50px;
  }
  .min-h-\[80px\] {
    min-height: 80px;
  }
  .w-1 {
    width: 0.25rem;
  }
  .w-1\/2 {
    width: 50%;
  }
  .w-1\/4 {
    width: 25%;
  }
  .w-12 {
    width: 3rem;
  }
  .w-14 {
    width: 3.5rem;
  }
  .w-16 {
    width: 4rem;
  }
  .w-2 {
    width: 0.5rem;
  }
  .w-20 {
    width: 5rem;
  }
  .w-28 {
    width: 7rem;
  }
  .w-3 {
    width: 0.75rem;
  }
  .w-3\.5 {
    width: 0.875rem;
  }
  .w-4 {
    width: 1rem;
  }
  .w-48 {
    width: 12rem;
  }
  .w-5 {
    width: 1.25rem;
  }
  .w-64 {
    width: 16rem;
  }
  .w-7 {
    width: 1.75rem;
  }
  .w-8 {
    width: 2rem;
  }
  .w-96 {
    width: 24rem;
  }
  .w-\[100\%\] {
    width: 100%;
  }
  .w-\[240px\] {
    width: 240px;
  }
  .w-\[300px\] {
    width: 300px;
  }
  .w-\[35\%\] {
    width: 35%;
  }
  .w-\[480px\] {
    width: 480px;
  }
  .w-\[500px\] {
    width: 500px;
  }
  .w-\[65\%\] {
    width: 65%;
  }
  .w-\[90\%\] {
    width: 90%;
  }
  .w-\[calc\(50\%-0\.25rem\)\] {
    width: calc(50% - 0.25rem);
  }
  .w-full {
    width: 100%;
  }
  .min-w-0 {
    min-width: 0px;
  }
  .min-w-\[300px\] {
    min-width: 300px;
  }
  .min-w-\[400px\] {
    min-width: 400px;
  }
  .max-w-2xl {
    max-width: 42rem;
  }
  .max-w-6xl {
    max-width: 72rem;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: 32rem;
  }
  .max-w-none {
    max-width: none;
  }
  .flex-1 {
    flex: 1 1 0%;
  }
  .flex-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-y-full {
    --tw-translate-y: -100%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  @keyframes 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 spin {
    to {
      transform: rotate(360deg);
    }
  }
  .animate-spin {
    animation: spin 1s linear infinite;
  }
  .cursor-ew-resize {
    cursor: ew-resize;
  }
  .cursor-help {
    cursor: help;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize-none {
    resize: none;
  }
  .resize-y {
    resize: vertical;
  }
  .resize {
    resize: both;
  }
  .appearance-none {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[repeat\(auto-fill\2c minmax\(120px\2c 1fr\)\)\] {
    grid-template-columns: repeat(auto-fill,minmax(120px,1fr));
  }
  .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;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-1 {
    gap: 0.25rem;
  }
  .gap-2 {
    gap: 0.5rem;
  }
  .gap-3 {
    gap: 0.75rem;
  }
  .gap-4 {
    gap: 1rem;
  }
  .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-1 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
  }
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
  }
  .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
  }
  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text-ellipsis {
    text-overflow: ellipsis;
  }
  .whitespace-normal {
    white-space: normal;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .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-\[12px\] {
    border-radius: 12px;
  }
  .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;
  }
  .border {
    border-width: 1px;
  }
  .border-0 {
    border-width: 0px;
  }
  .border-2 {
    border-width: 2px;
  }
  .border-4 {
    border-width: 4px;
  }
  .border-b {
    border-bottom-width: 1px;
  }
  .border-b-2 {
    border-bottom-width: 2px;
  }
  .border-l-4 {
    border-left-width: 4px;
  }
  .border-r {
    border-right-width: 1px;
  }
  .border-t {
    border-top-width: 1px;
  }
  .border-solid {
    border-style: solid;
  }
  .border-dashed {
    border-style: dashed;
  }
  .border-none {
    border-style: none;
  }
  .border-\[\#71A3F2\] {
    --tw-border-opacity: 1;
    border-color: rgb(113 163 242 / var(--tw-border-opacity, 1));
  }
  .border-\[\#979797\] {
    --tw-border-opacity: 1;
    border-color: rgb(151 151 151 / var(--tw-border-opacity, 1));
  }
  .border-\[\#d1d5db\] {
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
  }
  .border-blue-100 {
    --tw-border-opacity: 1;
    border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
  }
  .border-blue-200 {
    --tw-border-opacity: 1;
    border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
  }
  .border-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(147 197 253 / var(--tw-border-opacity, 1));
  }
  .border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  }
  .border-blue-600 {
    --tw-border-opacity: 1;
    border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
  }
  .border-gray-100 {
    border-color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
  }
  .border-gray-200 {
    border-color: color-mix(in srgb, var(--p-text-color) 20%, transparent);
  }
  .border-gray-300 {
    border-color: color-mix(in srgb, var(--p-text-color) 30%, transparent);
  }
  .border-gray-600 {
    border-color: color-mix(in srgb, var(--p-text-color) 60%, transparent);
  }
  .border-gray-700 {
    border-color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }
  .border-gray-900 {
    border-color: color-mix(in srgb, var(--p-text-color) 90%, transparent);
  }
  .border-green-200 {
    --tw-border-opacity: 1;
    border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
  }
  .border-green-400 {
    --tw-border-opacity: 1;
    border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
  }
  .border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
  }
  .border-pink-500 {
    --tw-border-opacity: 1;
    border-color: rgb(236 72 153 / var(--tw-border-opacity, 1));
  }
  .border-red-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
  }
  .border-red-500 {
    --tw-border-opacity: 1;
    border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
  }
  .border-transparent {
    border-color: transparent;
  }
  .border-yellow-200 {
    --tw-border-opacity: 1;
    border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
  }
  .border-t-\[\#00D9FF\] {
    --tw-border-opacity: 1;
    border-top-color: rgb(0 217 255 / var(--tw-border-opacity, 1));
  }
  .border-t-gray-800 {
    border-top-color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
  }
  .border-t-transparent {
    border-top-color: transparent;
  }
  .bg-\[\#d2d2d2\] {
    --tw-bg-opacity: 1;
    background-color: rgb(210 210 210 / var(--tw-bg-opacity, 1));
  }
  .bg-\[\#ffffff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  }
  .bg-\[rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
    background-color: rgba(0,0,0,0.5);
  }
  .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\/80 {
    background-color: rgb(0 0 0 / 0.8);
  }
  .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-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  }
  .bg-gray-100 {
    background-color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
  }
  .bg-gray-200 {
    background-color: color-mix(in srgb, var(--p-text-color) 20%, transparent);
  }
  .bg-gray-300 {
    background-color: color-mix(in srgb, var(--p-text-color) 30%, transparent);
  }
  .bg-gray-400 {
    background-color: color-mix(in srgb, var(--p-text-color) 40%, transparent);
  }
  .bg-gray-50 {
    background-color: color-mix(in srgb, var(--p-text-color) 5%, transparent);
  }
  .bg-gray-500 {
    background-color: color-mix(in srgb, var(--p-text-color) 50%, transparent);
  }
  .bg-gray-700 {
    background-color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }
  .bg-gray-800 {
    background-color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
  }
  .bg-gray-900 {
    background-color: color-mix(in srgb, var(--p-text-color) 90%, transparent);
  }
  .bg-green-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
  }
  .bg-green-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
  }
  .bg-pink-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1));
  }
  .bg-pink-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
  }
  .bg-purple-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
  }
  .bg-red-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
  }
  .bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
  }
  .bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
  }
  .bg-transparent {
    background-color: transparent;
  }
  .bg-white {
    background-color: var(--p-panel-background);
  }
  .bg-yellow-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
  }
  .bg-opacity-30 {
    --tw-bg-opacity: 0.3;
  }
  .bg-opacity-50 {
    --tw-bg-opacity: 0.5;
  }
  .bg-opacity-75 {
    --tw-bg-opacity: 0.75;
  }
  .bg-debug-btn {
    background-image: linear-gradient(325deg, hsl(189, 97%, 36%) 0%, hsl(189, 99%, 26%) 55%, hsl(189, 97%, 36%) 90%);
  }
  .bg-debug-collapsible-card-bg {
    background-image: linear-gradient(color-mix(in srgb, var(--p-text-color) 0%, transparent) 0%, color-mix(in srgb, var(--p-text-color) 60%, transparent) 100%);
  }
  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  .from-gray-50 {
    --tw-gradient-from: color-mix(in srgb, var(--p-text-color) 5%, transparent) 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);
  }
  .to-gray-100 {
    --tw-gradient-to: color-mix(in srgb, var(--p-text-color) 10%, transparent) var(--tw-gradient-to-position);
  }
  .fill-current {
    fill: currentColor;
  }
  .object-contain {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .object-cover {
    -o-object-fit: cover;
       object-fit: cover;
  }
  .p-0\.5 {
    padding: 0.125rem;
  }
  .p-1 {
    padding: 0.25rem;
  }
  .p-1\.5 {
    padding: 0.375rem;
  }
  .p-2 {
    padding: 0.5rem;
  }
  .p-3 {
    padding: 0.75rem;
  }
  .p-4 {
    padding: 1rem;
  }
  .p-6 {
    padding: 1.5rem;
  }
  .p-8 {
    padding: 2rem;
  }
  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .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-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-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .pb-10 {
    padding-bottom: 2.5rem;
  }
  .pb-2 {
    padding-bottom: 0.5rem;
  }
  .pb-3 {
    padding-bottom: 0.75rem;
  }
  .pl-4 {
    padding-left: 1rem;
  }
  .pr-12 {
    padding-right: 3rem;
  }
  .pr-4 {
    padding-right: 1rem;
  }
  .pr-6 {
    padding-right: 1.5rem;
  }
  .pt-1 {
    padding-top: 0.25rem;
  }
  .pt-2 {
    padding-top: 0.5rem;
  }
  .pt-4 {
    padding-top: 1rem;
  }
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .\!text-\[11px\] {
    font-size: 11px !important;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .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-extrabold {
    font-weight: 800;
  }
  .font-medium {
    font-weight: 500;
  }
  .font-normal {
    font-weight: 400;
  }
  .font-semibold {
    font-weight: 600;
  }
  .italic {
    font-style: italic;
  }
  .leading-relaxed {
    line-height: 1.625;
  }
  .leading-snug {
    line-height: 1.375;
  }
  .text-\[\#4fabdb\] {
    --tw-text-opacity: 1;
    color: rgb(79 171 219 / var(--tw-text-opacity, 1));
  }
  .text-\[\#71A3F2\] {
    --tw-text-opacity: 1;
    color: rgb(113 163 242 / var(--tw-text-opacity, 1));
  }
  .text-\[\#888\] {
    --tw-text-opacity: 1;
    color: rgb(136 136 136 / var(--tw-text-opacity, 1));
  }
  .text-\[\#fff\] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
  .text-\[\#fff\]\/70 {
    color: rgb(255 255 255 / 0.7);
  }
  .text-amber-600 {
    --tw-text-opacity: 1;
    color: rgb(217 119 6 / var(--tw-text-opacity, 1));
  }
  .text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  }
  .text-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity, 1));
  }
  .text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
  }
  .text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
  }
  .text-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(30 64 175 / var(--tw-text-opacity, 1));
  }
  .text-gray-300 {
    color: color-mix(in srgb, var(--p-text-color) 30%, transparent);
  }
  .text-gray-400 {
    color: color-mix(in srgb, var(--p-text-color) 40%, transparent);
  }
  .text-gray-500 {
    color: color-mix(in srgb, var(--p-text-color) 50%, transparent);
  }
  .text-gray-600 {
    color: color-mix(in srgb, var(--p-text-color) 60%, transparent);
  }
  .text-gray-700 {
    color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }
  .text-gray-800 {
    color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
  }
  .text-gray-900 {
    color: color-mix(in srgb, var(--p-text-color) 90%, transparent);
  }
  .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-green-700 {
    --tw-text-opacity: 1;
    color: rgb(21 128 61 / var(--tw-text-opacity, 1));
  }
  .text-green-800 {
    --tw-text-opacity: 1;
    color: rgb(22 101 52 / var(--tw-text-opacity, 1));
  }
  .text-green-900 {
    --tw-text-opacity: 1;
    color: rgb(20 83 45 / var(--tw-text-opacity, 1));
  }
  .text-pink-600 {
    --tw-text-opacity: 1;
    color: rgb(219 39 119 / var(--tw-text-opacity, 1));
  }
  .text-pink-700 {
    --tw-text-opacity: 1;
    color: rgb(190 24 93 / var(--tw-text-opacity, 1));
  }
  .text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(126 34 206 / var(--tw-text-opacity, 1));
  }
  .text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity, 1));
  }
  .text-red-600 {
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
  }
  .text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity, 1));
  }
  .text-white {
    color: var(--p-panel-background);
  }
  .underline {
    text-decoration-line: underline;
  }
  .underline-offset-2 {
    text-underline-offset: 2px;
  }
  .placeholder-gray-500::-moz-placeholder {
    color: color-mix(in srgb, var(--p-text-color) 50%, transparent);
  }
  .placeholder-gray-500::placeholder {
    color: color-mix(in srgb, var(--p-text-color) 50%, transparent);
  }
  .opacity-0 {
    opacity: 0;
  }
  .opacity-25 {
    opacity: 0.25;
  }
  .opacity-40 {
    opacity: 0.4;
  }
  .opacity-50 {
    opacity: 0.5;
  }
  .opacity-75 {
    opacity: 0.75;
  }
  .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_0_4px_rgba\(59\2c 130\2c 246\2c 0\.15\)\] {
    --tw-shadow: 0 0 0 4px rgba(59,130,246,0.15);
    --tw-shadow-colored: 0 0 0 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-\[0_0_12px_2px_\#3b82f6\] {
    --tw-shadow: 0 0 12px 2px #3b82f6;
    --tw-shadow-colored: 0 0 12px 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-\[inset_0_0_0_4px_rgba\(59\2c 130\2c 246\2c 0\.15\)\] {
    --tw-shadow: inset 0 0 0 4px rgba(59,130,246,0.15);
    --tw-shadow-colored: inset 0 0 0 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-\[inset_0_0_12px_2px_\#3b82f6\] {
    --tw-shadow: inset 0 0 12px 2px #3b82f6;
    --tw-shadow-colored: inset 0 0 12px 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-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }
  .outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  .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-pink-300 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity, 1));
  }
  .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-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    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, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .duration-200 {
    transition-duration: 200ms;
  }
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Specifically reset basic elements within our scope to counter preflight:false */

#comfyui-copilot-plugin,
#comfyui-copilot-start-pop-view {
  /* Reset common elements */
  h1, h2, h3, h4, h5, h6, p, ul, ol, button, input, textarea, select {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
  }
  /* Add basic styles that would normally come from preflight */
  * {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  /* Specific resets for buttons that might be affected by ComfyUI styles */
  button {
    background-color: transparent;
    background-image: none;
  }
}

.hide-scrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Webkit */
}

@keyframes breathe {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes colorBreathe {
  0%, 100% {
    color: hsl(189, 97%, 36%);
  }

  50% {
    color: var(--p-text-color) / 20;
    /* gray-200 */
  }
}

.animate-breathe-green {
  animation: breathe 3s ease-in-out infinite, colorBreathe 3s ease-in-out infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

.beautify-card-light {
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  background-image: linear-gradient(135deg, hsl(210 100% 98%), hsl(270 100% 96%));
  .card-border {
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-image: linear-gradient(
      0deg,
      hsl(0, 0%, 80%) -50%,
      hsl(0, 0%, 90%) 100%
    );
  }
  .card-border::before {
    content: "";
    pointer-events: none;
    position: fixed;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%), rotate(0deg);
    transform-origin: left;
    width: 200%;
    height: 10rem;
    background-image: linear-gradient(
      0deg,
      hsla(0, 0%, 100%, 100%) 0%,
      hsl(189, 100%, 50%) 40%,
      hsl(189, 100%, 50%) 60%,
      hsla(0, 0%, 100%, 90%) 100%
    );
    animation: rotate 8s linear infinite;
  }
}

.beautify-card-dark {
  box-shadow: 0px -16px 24px 0px rgba(255, 255, 255, 0.25) inset;
  background-color: hsla(240, 15%, 9%, 1);
  background-image: radial-gradient(at 88% 40%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 49% 30%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 14% 26%, hsla(240, 15%, 9%, 1) 0px, transparent 85%),
    radial-gradient(at 0% 64%, hsl(189, 99%, 26%) 0px, transparent 85%),
    radial-gradient(at 41% 94%, hsl(189, 97%, 36%) 0px, transparent 85%),
    radial-gradient(at 100% 99%, hsl(188, 94%, 13%) 0px, transparent 85%);
  /* background-image: linear-gradient(43deg, hsl(210 100% 98%) 0%, #C850C0 46%, #FFCC70 100%); */
  .card-border {
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background-image: linear-gradient(
      0deg,
      hsl(0, 0%, 40%) -50%,
      hsl(0, 0%, 60%) 100%
    );
  }
  .card-border::before {
    content: "";
    pointer-events: none;
    position: fixed;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%), rotate(0deg);
    transform-origin: left;
    width: 200%;
    height: 10rem;
    background-image: linear-gradient(
      0deg,
      hsla(0, 0%, 100%, 0) 0%,
      hsl(189, 100%, 50%) 40%,
      hsl(189, 100%, 50%) 60%,
      hsla(0, 0%, 40%, 0) 100%
    );
    animation: rotate 8s linear infinite;
  }
}

.debug-btn {
  transition: 0.8s;
  background-size: 280% auto;
  box-shadow:
    0px 0px 20px rgba(71, 184, 255, 0.5),
    0px 5px 5px -1px rgba(58, 125, 233, 0.25),
    inset 4px 4px 8px rgba(175, 230, 255, 0.5),
    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.debug-btn:hover {
  background-position: right top;
}

/* .debug-btn:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow:
    0 0 0 3px hsla(360 100% 100% / 1),
    0 0 0 6px hsl(189, 97%, 36%);
} */

.loading-spin {
  animation: rotate 1s linear infinite;
}

.search-input input::-moz-placeholder {
  color: #888;
}

.search-input input::placeholder {
  color: #888;
}

.hover\:\!overflow-visible:hover {
  overflow: visible !important;
}

.hover\:\!whitespace-normal:hover {
  white-space: normal !important;
}

.hover\:\!break-words:hover {
  overflow-wrap: break-word !important;
}

.hover\:\!border-\[\#71A3F2\]:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(113 163 242 / var(--tw-border-opacity, 1)) !important;
}

.hover\:\!border-blue-500:hover {
  --tw-border-opacity: 1 !important;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)) !important;
}

.hover\:\!bg-gray-100:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 10%, transparent) !important;
}

.hover\:\!bg-gray-50:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 5%, transparent) !important;
}

.hover\:bg-\[\#eee\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / 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-gray-100:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
}

.hover\:bg-gray-200:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 20%, transparent);
}

.hover\:bg-gray-300:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 30%, transparent);
}

.hover\:bg-gray-50:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 5%, transparent);
}

.hover\:bg-gray-800:hover {
  background-color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
}

.hover\:bg-green-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-pink-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 168 212 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}

.hover\:\!text-\[\#71A3F2\]:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(113 163 242 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-blue-500:hover {
  --tw-text-opacity: 1 !important;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1)) !important;
}

.hover\:\!text-gray-600:hover {
  color: color-mix(in srgb, var(--p-text-color) 60%, transparent) !important;
}

.hover\:\!text-gray-700:hover {
  color: color-mix(in srgb, var(--p-text-color) 70%, transparent) !important;
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover {
  color: color-mix(in srgb, var(--p-text-color) 60%, transparent);
}

.hover\:text-gray-700:hover {
  color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
}

.hover\:text-gray-800:hover {
  color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
}

.hover\:text-gray-900:hover {
  color: color-mix(in srgb, var(--p-text-color) 90%, transparent);
}

.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.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);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-blue-500\/20:focus {
  --tw-ring-color: rgb(59 130 246 / 0.2);
}

.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));
}

.disabled\:\!text-gray-300:disabled {
  color: color-mix(in srgb, var(--p-text-color) 30%, transparent) !important;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group:hover .group-hover\:\!block {
  display: block !important;
}

.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\:\!opacity-100 {
  opacity: 1 !important;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.prose-headings\:font-semibold :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 600;
}

.prose-h1\:text-base :is(:where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 1rem;
  line-height: 1.5rem;
}

.prose-h2\:text-sm :is(:where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.prose-h3\:text-xs :is(:where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-h4\:text-xs :is(:where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-p\:text-xs :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-a\:font-medium :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-weight: 500;
}

.prose-a\:text-gray-700 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
}

.prose-a\:underline :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  text-decoration-line: underline;
}

.hover\:prose-a\:text-gray-800 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
  color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
}

.prose-code\:text-xs :is(:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-pre\:text-xs :is(:where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-ol\:text-xs :is(:where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-ul\:text-xs :is(:where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

.prose-li\:text-xs :is(:where(li):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
  font-size: 0.75rem;
  line-height: 1rem;
}

@media (prefers-color-scheme: dark) {
  .dark\:border-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
  }

  .dark\:border-gray-600 {
    border-color: color-mix(in srgb, var(--p-text-color) 60%, transparent);
  }

  .dark\:border-gray-700 {
    border-color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }

  .dark\:border-red-800\/20 {
    border-color: rgb(153 27 27 / 0.2);
  }

  .dark\:bg-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
  }

  .dark\:bg-gray-600 {
    background-color: color-mix(in srgb, var(--p-text-color) 60%, transparent);
  }

  .dark\:bg-gray-700 {
    background-color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }

  .dark\:bg-gray-800 {
    background-color: color-mix(in srgb, var(--p-text-color) 80%, transparent);
  }

  .dark\:bg-green-900\/20 {
    background-color: rgb(20 83 45 / 0.2);
  }

  .dark\:bg-red-900\/20 {
    background-color: rgb(127 29 29 / 0.2);
  }

  .dark\:text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1));
  }

  .dark\:text-gray-100 {
    color: color-mix(in srgb, var(--p-text-color) 10%, transparent);
  }

  .dark\:text-gray-200 {
    color: color-mix(in srgb, var(--p-text-color) 20%, transparent);
  }

  .dark\:text-gray-300 {
    color: color-mix(in srgb, var(--p-text-color) 30%, transparent);
  }

  .dark\:text-gray-400 {
    color: color-mix(in srgb, var(--p-text-color) 40%, transparent);
  }

  .dark\:text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1));
  }

  .dark\:text-pink-400 {
    --tw-text-opacity: 1;
    color: rgb(244 114 182 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-300 {
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }

  .dark\:text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }

  .dark\:text-white {
    color: var(--p-panel-background);
  }

  .dark\:placeholder-gray-400::-moz-placeholder {
    color: color-mix(in srgb, var(--p-text-color) 40%, transparent);
  }

  .dark\:placeholder-gray-400::placeholder {
    color: color-mix(in srgb, var(--p-text-color) 40%, transparent);
  }

  .dark\:hover\:bg-blue-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
  }

  .dark\:hover\:bg-gray-700:hover {
    background-color: color-mix(in srgb, var(--p-text-color) 70%, transparent);
  }

  .dark\:hover\:text-gray-200:hover {
    color: color-mix(in srgb, var(--p-text-color) 20%, transparent);
  }

  .dark\:hover\:text-white:hover {
    color: var(--p-panel-background);
  }

  .dark\:focus\:border-blue-400:focus {
    --tw-border-opacity: 1;
    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
  }

  .dark\:focus\:ring-blue-400\/20:focus {
    --tw-ring-color: rgb(96 165 250 / 0.2);
  }
}

.\[\&\>\*\]\:\!my-1>* {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}