/* Postler — inline situations v2.3.2
   Match scenario label typography to the Context stage description at each breakpoint.
   Does not change the four stages, graphic, scenario content, or page typography. */
#thinking .example-switch {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:18px 20px;
  max-width:440px;
}
#thinking .switch-label {
  display:block;
  flex:0 0 auto;
  margin-bottom:0;
}
#thinking .switch-options {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:baseline;
  flex-wrap:wrap;
  gap:18px 16px;
}
#thinking .switch-option,
#thinking .switch-option.active {
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  border:0;
  border-radius:0;
  background:transparent;
  min-height:0;
  padding:0;
  font-family:Arimo,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.56;
  letter-spacing:normal;
  white-space:nowrap;
  transition:color 160ms ease;
}
#thinking .switch-option {color:#617080;}
#thinking .switch-option:hover {color:var(--postler-black);}
#thinking .switch-option.active {color:var(--postler-azure);}
#thinking .switch-option:focus-visible {
  outline:none;
  outline-offset:0;
  box-shadow:inset 0 -1.5px 0 var(--postler-azure);
  color:var(--postler-azure);
}
@media(min-width:651px) and (max-width:1180px) {
  #thinking .switch-option,
  #thinking .switch-option.active {font-size:13px;}
}
@media(max-width:650px) {
  #thinking .example-switch {gap:10px 14px;}
  #thinking .switch-options {gap:10px 14px;}
  #thinking .switch-option,
  #thinking .switch-option.active {
    font-size:14px;
    white-space:normal;
  }
}
@media(prefers-reduced-motion:reduce) {
  #thinking .switch-option {transition:none;}
}