/* Candidate only. Three glass selectors: the neon is a hollow rim, not a fill. */
.scenario-section .scenario-switch {
  width: min(640px,100%);
  gap: 14px;
  padding: 0;
  margin: 0 auto 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.scenario-section .scenario-switch button {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 15px 23px;
  gap: 16px;
  border: 1px solid #cfc6e4;
  border-radius: 999px;
  color: #5f5872;
  background: linear-gradient(135deg,#ffffffb8,#f4efff66);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 #fff,0 5px 18px #7a5ca90a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  transition: none;
}
.scenario-section .scenario-switch button > span {
  font-size: 18px;
  line-height: 1;
  color: inherit;
  flex: none;
}
.scenario-section .scenario-switch button::before,
.scenario-section .scenario-switch button::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
/* A solid outlined fallback remains usable when composited masks are unavailable. */
.scenario-section .scenario-switch button::before {
  border: 2px solid #8950de;
}
.scenario-section .scenario-switch button::after {
  border: 1px solid #a573ee66;
  box-shadow: 0 0 9px #9055ee45,0 0 23px #ae65ee30,inset 0 0 10px #ab80ee17;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .scenario-section .scenario-switch button::before {
    border: 0;
    padding: 2px;
    background: linear-gradient(115deg,#6143e5 0%,#ab53e8 37%,#cf78eb 55%,#8544e3 77%,#6358ed 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
.scenario-section .scenario-switch button[aria-pressed="true"] {
  color: #5c38ac;
  font-weight: 600;
  border-color: #bba4df;
  background: linear-gradient(135deg,#ffffffd6,#e9dffc99);
  box-shadow: inset 0 1px 0 #fff,0 5px 18px #7a5ca90a;
}
.scenario-section .scenario-switch button[aria-pressed="true"]::before { opacity: .4; }
@media (hover: hover) and (pointer: fine) {
  .scenario-section .scenario-switch button:hover::before,
  .scenario-section .scenario-switch button:hover::after { opacity: 1; }
}
.scenario-section .scenario-switch button:active::before,
.scenario-section .scenario-switch button:active::after { opacity: 1; transition: none; }
.scenario-section .scenario-switch button:focus-visible {
  outline: 2px solid #6d45c9;
  outline-offset: 5px;
  border-radius: 999px;
}
.scenario-section .scenario-switch button:focus-visible::before,
.scenario-section .scenario-switch button:focus-visible::after { opacity: 1; transition: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scenario-section .scenario-switch button { background: #f8f5fd; }
  .scenario-section .scenario-switch button[aria-pressed="true"] { background: #ede5fa; }
}
@media (max-width: 700px) {
  .scenario-section .scenario-switch { gap: 8px; margin-bottom: 27px; }
  .scenario-section .scenario-switch button { min-height: 48px; padding: 12px 13px; gap: 7px; font-size: 12px; }
  .scenario-section .scenario-switch button > span { font-size: 15px; }
}
@media (max-width: 370px) {
  .scenario-section .scenario-switch { gap: 7px; }
  .scenario-section .scenario-switch button { min-height: 46px; padding-inline: 10px; gap: 5px; font-size: 11px; }
  .scenario-section .scenario-switch button > span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-section .scenario-switch button::before,
  .scenario-section .scenario-switch button::after { transition: none; }
}