.wyrb-wrapper {
  max-width: 700px !important;
  margin: 24px 0 !important;
  --wyrb-green: #b7d8ab;
  --wyrb-green-deep: #94c19a;
  --wyrb-purple-mid: #8d8fa6;
  --wyrb-purple: #7c6b96;
  --wyrb-purple-deep: #5f4d75;
  --wyrb-charcoal: #262223;
  --wyrb-charcoal-soft: #3a3335;
  --wyrb-cream: #ffffff;
  --wyrb-ink: #241f21;
}

.wyrb-quiz {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 4px !important;
  padding: 34px 30px !important;
  background: linear-gradient(160deg, var(--wyrb-green) 0%, var(--wyrb-green-deep) 22%, var(--wyrb-purple-mid) 55%, var(--wyrb-purple) 78%, var(--wyrb-purple-deep) 100%) !important;
  min-height: 260px !important;
  box-shadow: 0 6px 18px rgba(36, 31, 33, 0.18) !important;
  overflow: hidden !important;
}

.wyrb-screen {
  display: none !important;
}

.wyrb-screen.wyrb-active {
  display: block !important;
}

.wyrb-progress {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 6px !important;
  background: rgba(36, 31, 33, 0.28) !important;
}

.wyrb-progress-fill {
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  background: #ffffff !important;
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.wyrb-question {
  display: inline-block !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 22px 0 !important;
  padding: 14px 18px !important;
  border-radius: 3px !important;
  background: var(--wyrb-charcoal) !important;
  color: #ffffff !important;
  overflow-wrap: break-word !important;
}

.wyrb-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.wyrb-option {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  padding: 14px 40px 14px 18px !important;
  overflow-wrap: break-word !important;
  border-radius: 3px !important;
  border: none !important;
  background: var(--wyrb-cream) !important;
  color: var(--wyrb-ink) !important;
  cursor: pointer !important;
  min-height: 44px !important;
  box-shadow: 0 2px 4px rgba(36, 31, 33, 0.12) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.wyrb-option::after {
  content: "\00BB" !important;
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-weight: 800 !important;
  color: var(--wyrb-purple-deep) !important;
  font-size: 18px !important;
}

.wyrb-option:hover,
.wyrb-option:focus {
  transform: translateX(2px) !important;
  box-shadow: 0 3px 8px rgba(36, 31, 33, 0.22) !important;
  outline: none !important;
}

.wyrb-result {
  text-align: left !important;
}

.wyrb-result-label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
  opacity: 0.75 !important;
  margin: 0 0 8px 0 !important;
  font-weight: 800 !important;
}

.wyrb-result-text {
  display: inline-block !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #ffffff !important;
  margin: 0 0 24px 0 !important;
  padding: 18px 20px !important;
  border-radius: 3px !important;
  background: var(--wyrb-charcoal) !important;
  font-weight: 600 !important;
}

.wyrb-restart {
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 12px 22px !important;
  border-radius: 3px !important;
  border: none !important;
  background: #ffffff !important;
  color: var(--wyrb-purple-deep) !important;
  cursor: pointer !important;
  min-height: 44px !important;
  box-shadow: 0 2px 4px rgba(36, 31, 33, 0.12) !important;
}

.wyrb-restart:hover,
.wyrb-restart:focus {
  transform: translateX(2px) !important;
  outline: none !important;
}

.wyrb-option:active,
.wyrb-restart:active {
  transform: scale(0.985) !important;
}

/* Staggered entrance for each screen's contents.
   Triggered every time .wyrb-active is (re)applied by script.js.
   fill-mode backwards holds the start frame during the delay, then
   reverts to normal styles so the hover/active transforms still work. */
@keyframes wyrb-fade-up {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wyrb-screen.wyrb-active .wyrb-question,
.wyrb-screen.wyrb-active .wyrb-option,
.wyrb-screen.wyrb-active .wyrb-result-label,
.wyrb-screen.wyrb-active .wyrb-result-text,
.wyrb-screen.wyrb-active .wyrb-restart {
  animation: wyrb-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards !important;
}

.wyrb-screen.wyrb-active .wyrb-question,
.wyrb-screen.wyrb-active .wyrb-result-label {
  animation-delay: 0.06s !important;
}

.wyrb-screen.wyrb-active .wyrb-option:nth-child(1) {
  animation-delay: 0.2s !important;
}

.wyrb-screen.wyrb-active .wyrb-option:nth-child(2) {
  animation-delay: 0.34s !important;
}

.wyrb-screen.wyrb-active .wyrb-option:nth-child(3) {
  animation-delay: 0.48s !important;
}

.wyrb-screen.wyrb-active .wyrb-result-text {
  animation-delay: 0.24s !important;
}

.wyrb-screen.wyrb-active .wyrb-restart {
  animation-delay: 0.42s !important;
}

/* Exit: the outgoing screen fades up and out before the next enters.
   script.js keeps .wyrb-active on it and adds .wyrb-exiting, then swaps
   screens on animationend. forwards holds the faded-out end frame so it
   doesn't flash back to full opacity in the final frame before removal. */
@keyframes wyrb-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-12px);
  }
}

.wyrb-screen.wyrb-exiting {
  animation: wyrb-fade-out 0.34s ease forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  .wyrb-screen.wyrb-active .wyrb-question,
  .wyrb-screen.wyrb-active .wyrb-option,
  .wyrb-screen.wyrb-active .wyrb-result-label,
  .wyrb-screen.wyrb-active .wyrb-result-text,
  .wyrb-screen.wyrb-active .wyrb-restart,
  .wyrb-screen.wyrb-exiting {
    animation: none !important;
  }
  .wyrb-option,
  .wyrb-restart,
  .wyrb-progress-fill {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  .wyrb-quiz {
    padding: 26px 20px !important;
  }
  .wyrb-question {
    font-size: 18px !important;
  }
  .wyrb-result-text {
    font-size: 17px !important;
  }
}

@media (max-width: 440px) {
  .wyrb-quiz {
    padding: 22px 16px !important;
    min-height: 220px !important;
  }
  .wyrb-question {
    font-size: 17px !important;
    margin: 0 0 18px 0 !important;
    padding: 12px 15px !important;
  }
  .wyrb-option {
    font-size: 15px !important;
    padding: 13px 34px 13px 15px !important;
  }
  .wyrb-option::after {
    right: 13px !important;
  }
  .wyrb-result-text {
    font-size: 16px !important;
    padding: 15px 16px !important;
  }
}