/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties;
@layer components {
  .cd_canvas-wrapper {
    position: relative;
    width: 100%;
    min-width: calc(var(--spacing, 0.25rem) * 0);
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-400, #999999);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600, #666666);
    }
    background-color: var(--color-gray-100, #E6E6E6);
    &:where(.dark, .dark *) {
      background-color: var(--color-gray-900, #1A1A1A);
    }
  }
  .cd_canvas {
    display: block;
    max-height: 70vh;
    max-width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    cursor: crosshair;
    touch-action: none;
  }
  .cd_loupe {
    pointer-events: none;
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    --tw-translate-y: calc(calc(100% + 1rem) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .cd_loupe.cd_loupe--below {
    --tw-translate-y: calc(var(--spacing, 0.25rem) * 4);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .cd_loupe-canvas {
    height: calc(var(--spacing, 0.25rem) * 32);
    width: calc(var(--spacing, 0.25rem) * 32);
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 4px;
    border-color: var(--color-gray-0, #FFFFFF);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-950, #0D0D0D);
    }
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    image-rendering: pixelated;
  }
  .cd_loupe-hex {
    margin-top: calc(var(--spacing, 0.25rem) * 1);
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 0.5);
    font-family: var(--font-mono, "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: var(--text-xs, 0.75rem);
    line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
    --tw-font-weight: var(--font-weight-bold, 700);
    font-weight: var(--font-weight-bold, 700);
    border-radius: 0.25rem;
    background-color: var(--color-gray-950, #0D0D0D);
    color: var(--color-gray-50, #F2F2F2);
  }
  .cd_swatch {
    height: calc(var(--spacing, 0.25rem) * 20);
    width: calc(var(--spacing, 0.25rem) * 20);
    flex-shrink: 0;
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-400, #999999);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600, #666666);
    }
  }
  #cd_swatch {
    height: 34px;
  }
  .cd_code-button {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    width: 100%;
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-400, #999999);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600, #666666);
    }
    cursor: pointer;
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    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));
    &:hover {
      @media (hover: hover) {
        border-color: var(--color-candir-500, var(--color-spring-500));
      }
    }
  }
  .cd_code-display {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing, 0.25rem) * 2);
    white-space: nowrap;
    padding-inline: calc(var(--spacing, 0.25rem) * 2);
    padding-block: calc(var(--spacing, 0.25rem) * 1);
    border-style: var(--tw-border-style);
    border-width: 1px;
    border-color: var(--color-gray-400, #999999);
    &:where(.dark, .dark *) {
      border-color: var(--color-gray-600, #666666);
    }
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
  }
  .cd_code-button i {
    margin-left: auto;
    font-size: var(--text-lg, 1.125rem);
    line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
    color: var(--color-gray-500, #808080);
  }
  .cd_history-swatch {
    cursor: pointer;
  }
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@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-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-font-weight: initial;
    }
  }
}