/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
@layer components {
  .cd_item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing, 0.25rem) * 3);
    padding: calc(var(--spacing, 0.25rem) * 3);
    border-style: var(--tw-border-style);
    border-width: 2px;
    --tw-border-style: dashed;
    border-style: dashed;
    border-color: var(--color-gray-950, #0D0D0D);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-50, #F2F2F2);
    }
    height: calc(var(--spacing, 0.25rem) * 15);
    max-width: calc(var(--spacing, 0.25rem) * 80);
    min-width: -moz-fit-content;
    min-width: fit-content;
    cursor: pointer;
    background-color: var(--color-gray-100, #E6E6E6);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900, #1A1A1A);
    }
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
    transition-duration: var(--tw-duration, var(--default-transition-duration, 300ms));
    --tw-duration: 300ms;
    transition-duration: 300ms;
    font-size: var(--text-xl, 1.25rem);
    line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
  }
  .cd_item--internal {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-candir-600, var(--color-spring-600));
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          border-color: var(--color-candir-400, var(--color-spring-400));
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-candir-100, var(--color-spring-100));
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          background-color: var(--color-candir-900, var(--color-spring-900));
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-candir-600, var(--color-spring-600));
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          color: var(--color-candir-400, var(--color-spring-400));
        }
      }
    }
  }
  .cd_item--external {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-azure-600, #336699);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          border-color: var(--color-azure-400, #6699CC);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-azure-100, #D9E6F2);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          background-color: var(--color-azure-900, #0D1926);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-azure-600, #336699);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          color: var(--color-azure-400, #6699CC);
        }
      }
    }
  }
  .cd_item--protected {
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-red-600, #993333);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          border-color: var(--color-red-400, #CC6666);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100, #F2D9D9);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          background-color: var(--color-red-900, #260D0D);
        }
      }
    }
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-600, #993333);
      }
    }
    &:hover {
      @media (hover: hover) {
        &:where(.dark, .dark *) {
          color: var(--color-red-400, #CC6666);
        }
      }
    }
  }
  .cd_item--disabled {
    border-color: var(--color-gray-600, #666666);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-400, #999999);
    }
    background-color: var(--color-gray-100, #E6E6E6);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900, #1A1A1A);
    }
    color: var(--color-gray-600, #666666);
    &:where(.dark, .dark *) {
      color: var(--color-gray-400, #999999);
    }
    pointer-events: none;
  }
  .cd_item--internal .cd_polygon--1 {
    fill: var(--color-candir-600, var(--color-spring-600));
    &:where(.dark, .dark *) {
      fill: var(--color-candir-400, var(--color-spring-400));
    }
  }
  .cd_item--internal .cd_polygon--2 {
    fill: var(--color-candir-400, var(--color-spring-400));
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-candir-600, var(--color-spring-600));
    }
  }
  .cd_item--internal .cd_polygon--3 {
    fill: var(--color-candir-200, var(--color-spring-200));
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-candir-800, var(--color-spring-800));
    }
  }
  .cd_item--internal .cd_polygon--4 {
    fill: var(--color-candir-100, var(--color-spring-100));
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-candir-900, var(--color-spring-900));
    }
  }
  .cd_item--external .cd_polygon--1 {
    fill: var(--color-azure-600, #336699);
    &:where(.dark, .dark *) {
      fill: var(--color-azure-400, #6699CC);
    }
  }
  .cd_item--external .cd_polygon--2 {
    fill: var(--color-azure-400, #6699CC);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-azure-600, #336699);
    }
  }
  .cd_item--external .cd_polygon--3 {
    fill: var(--color-azure-200, #B3CCE6);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-azure-800, #19334D);
    }
  }
  .cd_item--external .cd_polygon--4 {
    fill: var(--color-azure-100, #D9E6F2);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-azure-900, #0D1926);
    }
  }
  .cd_item--protected .cd_polygon--1 {
    fill: var(--color-red-600, #993333);
    &:where(.dark, .dark *) {
      fill: var(--color-red-400, #CC6666);
    }
  }
  .cd_item--protected .cd_polygon--2 {
    fill: var(--color-red-400, #CC6666);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-red-600, #993333);
    }
  }
  .cd_item--protected .cd_polygon--3 {
    fill: var(--color-red-200, #E6B3B3);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-red-800, #4D1919);
    }
  }
  .cd_item--protected .cd_polygon--4 {
    fill: var(--color-red-100, #F2D9D9);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-red-900, #260D0D);
    }
  }
  .cd_item--disabled .cd_polygon--1 {
    fill: var(--color-gray-600, #666666);
    &:where(.dark, .dark *) {
      fill: var(--color-gray-400, #999999);
    }
  }
  .cd_item--disabled .cd_polygon--2 {
    fill: var(--color-gray-400, #999999);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-gray-600, #666666);
    }
  }
  .cd_item--disabled .cd_polygon--3 {
    fill: var(--color-gray-200, #CCCCCC);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-gray-800, #333333);
    }
  }
  .cd_item--disabled .cd_polygon--4 {
    fill: var(--color-gray-100, #E6E6E6);
    opacity: 30%;
    &:where(.dark, .dark *) {
      fill: var(--color-gray-900, #1A1A1A);
    }
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-duration: initial;
      --tw-font-weight: initial;
    }
  }
}