/* Approved blue-to-cyan accents; white canvas and content samples stay unchanged. */
:root {
  --wb-blue: #2563EB;
  --wb-cyan: #00C6EB;
  --wb-accent-soft: #EFFBFF;
  --wb-purple: var(--wb-blue);
  --wb-tint: var(--wb-accent-soft);
  --wb-gradient: linear-gradient(90deg, var(--wb-blue) 0%, var(--wb-cyan) 100%);
}
::selection { background: #DFF5FF; color: var(--wb-ink); }
.wb-mark, .wb-intro-mark {
  background: linear-gradient(180deg, var(--wb-blue), var(--wb-cyan));
}
.wb-fill, .wb-next, #wb-next { background: var(--wb-gradient); }
.wb-next, #wb-next { color: #fff; box-shadow: 0 5px 12px rgb(37 99 235 / 9%); }
.wb-next:hover { box-shadow: 0 8px 19px rgb(37 99 235 / 17%); }
.wb-start { box-shadow: 0 10px 25px rgb(37 99 235 / 12%); }
.wb-track { background: #EDF3F8; }
.wb-intro h1 span, .wb-defer, .wb-edit, .wb-json,
.wb-answer-state.is-answered { color: var(--wb-blue); }
.wb-back:hover, .wb-edit:hover, .wb-json:hover { color: #1D4ED8; }
.wb-defer { border-color: #CDE6F8; }
.wb-defer:hover { background: var(--wb-accent-soft); }
.wb-answer-state.is-answered::before { background: var(--wb-blue); }
.wb-stage-rail li::before { border-color: #CDDEED; }
.wb-stage-rail li:not(:last-child)::after { background: #DFEAF3; }
.wb-stage-rail li.is-active::before {
  background: var(--wb-blue);
  border-color: var(--wb-blue);
  box-shadow: 0 0 0 4px rgb(37 99 235 / 7%);
}
.wb-stage-rail li.is-complete::before { background: #8DDCF4; border-color: #8DDCF4; }
.wb-choice-icon { color: #62758C; background: #F3F7FB; }
.wb-choice:hover {
  border-color: #81C5EF;
  box-shadow: 0 6px 16px rgb(37 99 235 / 5%);
}
.wb-choice.is-selected {
  background: var(--wb-accent-soft);
  border-color: #4DA6EC;
  box-shadow: 0 0 0 .5px #4DA6EC, 0 4px 14px rgb(37 99 235 / 5%);
}
.wb-choice.is-selected:hover { background: #E4F7FF; border-color: var(--wb-blue); }
.wb-choice.is-selected .wb-choice-icon { background: #DFF5FF; color: var(--wb-blue); }
.wb-selected { border-color: #C4D5E5; }
.is-selected .wb-selected {
  background: var(--wb-blue);
  border-color: var(--wb-blue);
  box-shadow: 0 2px 5px rgb(37 99 235 / 12%);
}
.wb-input { border-color: #D6E1EC; background: #FCFDFF; }
.wb-input:focus { border-color: var(--wb-blue); box-shadow: 0 0 0 4px rgb(37 99 235 / 6%); }
.wb-input[aria-invalid="true"] { border-color: #B33053; }
.wb-category, .wb-review-heading, .wb-review-preview,
.wb-preview-card, .wb-preview-palette, .wb-preview-ring,
.wb-review-color, .wb-intro-flow { border-color: #DDE7F0; }
.wb-preview-card { box-shadow: 0 15px 34px rgb(37 99 235 / 5%); }
.wb-preview-palette { box-shadow: 0 10px 28px rgb(37 99 235 / 4%); }
.wb-review-preview { box-shadow: 0 8px 24px rgb(37 99 235 / 4%); }
.wb-intro-flow li:not(:last-child)::after { background: #DDE7F0; }
.wb-intro-flow li > span { border-color: #CDE1F2; color: #527AAB; }
.wb-intro-flow li:first-child > span {
  background: var(--wb-accent-soft);
  border-color: #AADCF5;
  color: var(--wb-blue);
}
button:focus-visible, input:focus-visible, textarea:focus-visible,
.wb-choice:has(.wb-choice-input:focus-visible) { outline-color: var(--wb-blue); }
@media (forced-colors: active) {
  .wb-choice.is-selected { outline: 2px solid Highlight; }
  .wb-next { border: 2px solid ButtonText; }
  .wb-fill { background: Highlight; }
}