.wonder {
  --wonder-ink: #274b3e;
  --wonder-muted: #526759;
  --wonder-border: #c9d6c8;
  --wonder-paper: #f8f7ee;
  --wonder-accent: #8b5725;
  color: var(--wonder-ink);
  margin: 1rem 0;
  border: 1px solid var(--wonder-border);
  border-radius: 1.1rem;
  background: var(--wonder-paper);
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
}
.wonder *, .wonder *::before, .wonder *::after { box-sizing: border-box; }
.wonder [hidden] { display: none !important; }
.wonder .wonder__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 52px;
  padding: .9rem 1.1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--wonder-ink);
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: .95rem;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wonder .wonder__toggle:hover { background: #edf0e5; }
.wonder .wonder__chevron { font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.wonder .wonder__toggle[aria-expanded="true"] .wonder__chevron { transform: rotate(180deg); }
.wonder .wonder__panel { border-top: 1px solid var(--wonder-border); padding: 1rem 1.1rem 1.1rem; }
.wonder .wonder__eyebrow { color: var(--wonder-muted); font-size: .72rem; letter-spacing: .075em; text-transform: uppercase; margin: 0 0 .45rem; font-weight: 650; }
.wonder .wonder__title { margin: 0; color: var(--wonder-ink); font: inherit; font-size: 1.15rem; font-weight: 650; line-height: 1.35; }
.wonder .wonder__diagram { display: block; margin: .6rem auto .9rem; max-width: 460px; }
.wonder .wonder__diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.wonder .wonder-svg-label { fill: #304b3f; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 500; }
.wonder .wonder-svg-question { font-size: 34px; font-family: system-ui, sans-serif; fill: #8b5725; }
.wonder .wonder__choices { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 .9rem; }
.wonder .wonder__choice {
  min-height: 44px;
  flex: 1 1 100px;
  padding: .65rem .8rem;
  border: 1px solid #aebfab;
  border-radius: .75rem;
  color: var(--wonder-ink);
  background: #fffef8;
  box-shadow: none;
  font: inherit;
  font-size: .87rem;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.wonder .wonder__choice:hover { background: #edf0e5; }
.wonder .wonder__choice[aria-pressed="true"] { color: #fffdf3; background: var(--wonder-ink); border-color: var(--wonder-ink); }
.wonder .wonder__range { margin: .8rem 0 1rem; }
.wonder .wonder__range label { font-size: .88rem; font-weight: 600; display: block; margin-bottom: .15rem; }
.wonder .wonder__range input[type="range"] { display: block; width: 100%; height: 44px; margin: 0; padding: 0 .25rem; cursor: pointer; accent-color: var(--wonder-ink); border: 0; background: transparent; }
.wonder .wonder__scale { display: flex; justify-content: space-between; gap: .6rem; color: var(--wonder-muted); font-size: .73rem; }
.wonder .wonder__scale span { flex: 1; }
.wonder .wonder__scale span:nth-child(2) { text-align: center; }
.wonder .wonder__scale span:last-child { text-align: right; }
.wonder .wonder__result { color: var(--wonder-ink); font-size: .94rem; line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
.wonder .wonder__note { color: var(--wonder-muted); font-size: .77rem; line-height: 1.5; margin: .75rem 0 0; overflow-wrap: anywhere; }
.wonder :is(button,input):focus-visible { outline: 3px solid var(--wonder-accent); outline-offset: 3px; }
.wonder .wonder__toggle:focus-visible { outline-offset: -5px; }
.wonder.wonder--quiet *, .wonder.wonder--quiet *::before, .wonder.wonder--quiet *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .wonder *, .wonder *::before, .wonder *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 370px) {
  .wonder .wonder__panel { padding: .9rem .8rem; }
  .wonder .wonder__toggle { padding-inline: .85rem; }
  .wonder .wonder__choice { flex-basis: 92px; padding-inline: .5rem; }
  .wonder .wonder-svg-label { font-size: 11.5px; }
}