/* This component has no CSS animation: setPlaying() pauses the complete scene. */
.service-fusion {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 540;
  isolation: isolate;
}
.service-fusion-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.service-fusion-labels {
  fill: #363330;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: .02em;
}
.service-fusion-question,
.service-fusion-main {
  font-weight: 500;
}
.service-fusion-label {
  font-weight: 400;
}
/* Keep the surrounding service surfaces in the client's warm-gray palette. */
.service-theme,
.inner-page .service-theme-panel {
  background: linear-gradient(180deg, #fff, #FAF9F6);
  color: #363330;
}
.inner-page .service-orbit.service-fusion {
  background: transparent;
}
.service-theme-intro,
.service-theme-controls,
.service-concerns,
.service-concerns .concern-copy p,
.service-concerns .concern-list button > span {
  color: #363330;
}
.service-theme-controls > button,
.service-concerns .concern-list button,
.service-concerns .motion-control {
  border-color: #C7BDB0;
}
.service-concerns .concern-list button[aria-pressed=true],
.service-concerns .concern-list button.is-active {
  color: #363330;
  border-color: #C7BDB0;
  background: #E7E2DA;
}
.service-concerns .concern-list button[aria-pressed=true] > span {
  color: #363330;
}
.service-theme-controls > button:hover {
  background: #F2F0EB;
}
.service-theme:focus-visible,
.service-theme-controls > button:focus-visible,
.service-concerns .concern-list > button:focus-visible,
.service-concerns .motion-control:focus-visible {
  outline-color: #363330;
}
.fusion-fallback {
  color: #363330;
  background: radial-gradient(ellipse, #E7E2DA, transparent 68%);
}
@media (max-width: 600px) {
  .service-fusion-label { font-size: 18px; }
  .service-fusion-question { font-size: 28px; }
  .service-fusion-main { font-size: 34px; }
}