.tw-color-swatches {
  --tw-swatch-bg: #ffffff;
  --tw-swatch-fg: #111827;
  --tw-swatch-border: #475569;
  --tw-swatch-focus: #1d4ed8;
  box-sizing: border-box;
  background: var(--tw-swatch-bg);
  color: var(--tw-swatch-fg);
  border: 1px solid var(--tw-swatch-border);
  border-radius: .75rem;
  padding: 1rem;
  margin-block: 1rem;
  min-width: 0;
  font: 1rem/1.5 system-ui, sans-serif;
}
.tw-color-swatches *, .tw-color-swatches *::before, .tw-color-swatches *::after { box-sizing: border-box; }
.tw-color-swatches [hidden] { display: none !important; }
.tw-color-swatches__title, .tw-color-swatches h4 { margin-block: 0 .75rem; }
.tw-color-swatches__notice, .tw-color-swatches__quantization { margin-block: .5rem; overflow-wrap: anywhere; }
.tw-color-swatches__navigation { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.tw-color-swatches__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.tw-color-swatches__item { min-width: 0; }
.tw-color-swatches__card { height: 100%; border: 1px solid var(--tw-swatch-border); border-radius: .5rem; padding: .875rem; min-width: 0; }
.tw-color-swatches__frame {
  position: relative;
  height: 5rem;
  border: 2px solid var(--tw-swatch-border);
  border-radius: .375rem;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(-45deg, #cbd5e1 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #cbd5e1 75%), linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
  background-size: 1rem 1rem;
  background-position: 0 0, 0 .5rem, .5rem -.5rem, -.5rem 0;
}
.tw-color-swatches__fill { display: block; position: absolute; inset: 0; }
.tw-color-swatches__transparency { margin-block: .75rem; font-weight: 600; }
.tw-color-swatches label { display: block; font-weight: 600; margin-block: .5rem; }
.tw-color-swatches__values { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 10rem; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--tw-swatch-border); border-radius: .25rem; padding: .5rem; background: var(--tw-swatch-bg); color: var(--tw-swatch-fg); font: .875rem/1.5 ui-monospace, monospace; }
.tw-color-swatches button { min-height: 2.75rem; border: 1px solid var(--tw-swatch-border); border-radius: .375rem; padding: .5rem .75rem; background: #f1f5f9; color: var(--tw-swatch-fg); font: inherit; cursor: pointer; }
.tw-color-swatches button:disabled { cursor: default; opacity: 1; border-style: dashed; }
.tw-color-swatches__select { margin-block: .75rem; }
.tw-color-swatches button:focus-visible, .tw-color-swatches textarea:focus-visible, .tw-color-swatches__page-summary:focus, .tw-color-swatches__title:focus { outline: 3px solid var(--tw-swatch-focus); outline-offset: 3px; }
.tw-color-swatches__error { font-weight: 700; border-inline-start: .25rem solid currentColor; padding-inline-start: .75rem; }
.tw-color-swatches__status { margin-block-end: 0; }
.tw-color-swatches__forced-note { display: none; }
@media (forced-colors: active) {
  .tw-color-swatches { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .tw-color-swatches__card, .tw-color-swatches__frame, .tw-color-swatches__values { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .tw-color-swatches__frame { background-image: none; }
  .tw-color-swatches__fill { display: none; }
  .tw-color-swatches__forced-note { display: block; }
  .tw-color-swatches button { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .tw-color-swatches button:focus-visible, .tw-color-swatches textarea:focus-visible, .tw-color-swatches__page-summary:focus, .tw-color-swatches__title:focus { outline-color: Highlight; }
}