.community-hopscotch { display: none; }

.tf-footer-motion-choices { display: none; position: relative; }
body[data-motion-preference] .tf-footer-motion-choices { display: inline-flex; }
.tf-footer-motion-choices > button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  min-height: 2.75rem;
  padding: .35rem .45rem;
}
.tf-footer-motion-panel {
  background: #f7f1e5;
  border: 1px solid rgb(154 79 50 / 38%);
  border-radius: .8rem;
  box-shadow: 0 .75rem 1.75rem rgb(57 55 43 / 16%);
  padding: .85rem 1rem;
  position: absolute;
  z-index: 45;
}
.tf-footer-motion-panel { bottom: calc(100% + .5rem); left: 0; width: min(19rem, calc(100vw - 2.5rem)); }
.tf-footer-motion-panel[hidden] { display: none; }
.tf-motion-control { border: 0; margin: 0; min-width: 0; padding: 0; }
.tf-motion-options { display: grid; gap: .15rem; }
.tf-motion-options label {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .2rem .35rem;
}
.tf-motion-options input { accent-color: #61724b; height: 1rem; width: 1rem; }
.tf-motion-options input:focus-visible { outline: 2px solid #9c624b; outline-offset: 2px; }
.tf-motion-status { margin: .45rem 0 0; }

@media (min-width: 56.3125rem) {
  .community-kids-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .community-hopscotch {
    align-self: center;
    display: block;
    flex: 0 0 auto;
    height: 21.25rem;
    margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
    width: 9rem;
  }

  .community-hopscotch svg { display: block; height: 100%; overflow: visible; width: 100%; }
  .community-hopscotch path {
    fill: none;
    stroke: #9c624b;
    stroke-dasharray: 29 2.4 13 1.6 22 1.8 8 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3.55;
    vector-effect: non-scaling-stroke;
  }
}

@media (max-width: 56.25rem) {
  .community-hopscotch { display: none; }
}

@media (max-width: 42rem) {
  .tf-footer-motion-panel { bottom: 1.25rem; left: 1.25rem; max-height: calc(100vh - 2.5rem); overflow: auto; position: fixed; right: 1.25rem; width: auto; }
}