:where(a,button,input) {
  transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease,outline-color 150ms ease;
}

.brand-mark,.menu-icon,.menu-arrow {
  transition:color 180ms ease,background-color 180ms ease,stroke 180ms ease,transform 180ms ease;
}

.menu-bar button[aria-expanded=true] .menu-icon {
  stroke:#e0ffb4;
}

.toy,.small-tool {
  transition:border-color 200ms ease,box-shadow 200ms ease;
}

@media(hover:hover) {
  .menu-group>button:hover,.menu-bar>a:hover {
    transform:translateX(2px);
  }
  .menu-children>a:hover {
    transform:translateX(3px);
  }
  .toy-buttons button:hover,.tool-button:hover {
    transform:translateY(-2px);
  }
  .palette button:hover,.ink-button:hover {
    transform:translateY(-3px);
  }
  .menu-toggle:hover .brand-mark {
    background:#243222;
  }
  .menu-toggle[aria-expanded=true]:hover .brand-mark {
    background:#dafd9e;
  }
  .toy:hover,.small-tool:hover {
    border-color:#5b714d;
  }
}

button:active {
  transform:scale(.97)!important;
}

@media(prefers-reduced-motion:no-preference) {
  .hero-sub {
    animation:arrive 380ms ease-out both;
  }
  .playground {
    animation:arrive 440ms 40ms ease-out both;
  }
  .small-tools {
    animation:arrive 440ms 80ms ease-out both;
  }
}

@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(9px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  button:active {
    transform:none!important;
  }
}