/* Native mode classes drive the palette. Explicit sRGB keeps mode colours
   independent of the site's generic green-to-blue brand conversion. */
.csc3 .csc3-workshop.csc3-mode-light {
  --cc-accent: color(srgb .184314 .768627 .380392);
  --cc-mode-soft: color(srgb .125490 .235294 .176471);
  --cc-mode-border: color(srgb .231373 .529412 .333333);
  --cc-placeholder-filter: grayscale(1) sepia(1) saturate(3) hue-rotate(92deg) brightness(.93);
}
.csc3 .csc3-workshop.csc3-mode-medium {
  --cc-accent: color(srgb .082353 .615686 .862745);
  --cc-mode-soft: color(srgb .109804 .207843 .270588);
  --cc-mode-border: color(srgb .196078 .482353 .619608);
  --cc-placeholder-filter: grayscale(1) sepia(1) saturate(5) hue-rotate(165deg) brightness(.97);
}
.csc3 .csc3-workshop.csc3-mode-hard {
  --cc-accent: color(srgb .690196 .356863 .925490);
  --cc-mode-soft: color(srgb .207843 .156863 .258824);
  --cc-mode-border: color(srgb .501961 .313725 .650980);
  --cc-placeholder-filter: grayscale(1) sepia(1) saturate(5) hue-rotate(225deg) brightness(.97);
}

.csc3 .csc3-workshop .csc3-modes > button:nth-child(1) {
  --cc-button-accent: color(srgb .184314 .768627 .380392);
  --cc-button-soft: color(srgb .125490 .235294 .176471);
}
.csc3 .csc3-workshop .csc3-modes > button:nth-child(2) {
  --cc-button-accent: color(srgb .082353 .615686 .862745);
  --cc-button-soft: color(srgb .109804 .207843 .270588);
}
.csc3 .csc3-workshop .csc3-modes > button:nth-child(3) {
  --cc-button-accent: color(srgb .690196 .356863 .925490);
  --cc-button-soft: color(srgb .207843 .156863 .258824);
}
.csc3 .csc3-workshop .csc3-modes > button > b {
  color: var(--cc-button-accent);
  background: var(--cc-button-soft);
}
.csc3 .csc3-workshop .csc3-modes > button.is-active {
  background: var(--cc-mode-soft);
  border-color: var(--cc-mode-border);
  color: #f0f5f8;
}
.csc3 .csc3-workshop .csc3-modes > button.is-active > b {
  background: var(--cc-button-accent);
  color: #10202b;
}
.csc3 .csc3-workshop .csc3-slot > img.csc3-slot-placeholder {
  opacity: .88;
  filter: var(--cc-placeholder-filter);
  transition: filter .18s ease, opacity .18s ease;
}
.csc3 .csc3-workshop .csc3-fast {
  color: #10202b;
  background: var(--cc-accent);
  border-color: var(--cc-accent);
}
.csc3 .csc3-workshop .csc3-fast.is-active {
  box-shadow: inset 0 0 0 2px #ffffff9e;
}
.csc3 .csc3-workshop .csc3-submit:not(:disabled) {
  background: var(--cc-accent);
  border-color: var(--cc-accent);
}
.csc3 .csc3-workshop .csc3-submit:not(:disabled):hover {
  background: var(--cc-accent);
  filter: brightness(1.1);
}
.csc3 .csc3-workshop .csc3-loading {
  border-top-color: var(--cc-accent);
}
.csc3 .csc3-workshop .csc3-modes > button,
.csc3 .csc3-workshop .csc3-modes > button > b,
.csc3 .csc3-workshop .csc3-fast,
.csc3 .csc3-workshop .csc3-submit {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .csc3 .csc3-workshop .csc3-slot > img.csc3-slot-placeholder,
  .csc3 .csc3-workshop .csc3-modes > button,
  .csc3 .csc3-workshop .csc3-modes > button > b,
  .csc3 .csc3-workshop .csc3-fast,
  .csc3 .csc3-workshop .csc3-submit {
    transition: none !important;
  }
}