/* Move the actual button artwork while its hit area stays anchored. */
.design-control {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  transform: none;
}

.control-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  border-radius: inherit;
  pointer-events: none;
  transform-origin: center;
  transform: none;
  filter: none;
  opacity: 1;
}

.control-art > svg {
  width: 100%;
  height: 100%;
  vertical-align: top;
  overflow: visible;
}

.control-face {
  display: none;
}

.site-header {
  --header-hover: var(--green);
  --hover-logo-green: block;
  --hover-logo-white: none;
}

[data-page="top"][data-theme="normal"] .site-header:not([data-surface="paper"]),
.site-header[data-surface="green"] {
  --header-hover: #fff;
  --hover-logo-green: none;
  --hover-logo-white: block;
}

.site-header nav a {
  position: relative;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.38em;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: .7;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Keep the existing immediate keyboard focus outline. */
.site-header nav a:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .design-control:hover:not(:disabled):not([aria-disabled="true"]) .control-art {
    opacity: .92;
  }

  .site-footer a:hover {
    opacity: .68;
  }

  .site-header nav a:hover::after {
    transform: scaleX(1);
  }

  :root[data-page] .site-header nav a[href]:hover,
  :root[data-page] .site-header .about-toggle:hover,
  :root[data-page] .site-header .menu-toggle:hover {
    color: var(--header-hover);
  }

  :root[data-page] .site-header .home-logo:hover {
    filter: none;
  }

  :root[data-page] .site-header .home-logo:hover .logo-green {
    display: var(--hover-logo-green);
  }

  :root[data-page] .site-header .home-logo:hover .logo-white {
    display: var(--hover-logo-white);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .control-art {
    transition: transform 420ms cubic-bezier(.2, .7, .25, 1), filter 420ms cubic-bezier(.2, .7, .25, 1), opacity 240ms ease-out;
  }

  .design-control:hover:not(:disabled):not([aria-disabled="true"]) .control-art {
    opacity: 1;
    transform: translateY(-3px) scale(1.02);
    filter: drop-shadow(0 9px 14px rgb(10 10 10 / 20%));
  }

  .design-control:active:not(:disabled):not([aria-disabled="true"]) .control-art {
    transform: translateY(0) scale(.995);
    filter: drop-shadow(0 3px 7px rgb(10 10 10 / 14%));
    transition-duration: 120ms;
  }

  .site-header nav a::after {
    transition: transform 350ms cubic-bezier(.2, .65, .3, 1);
  }

  .site-header nav a,
  .about-toggle,
  .menu-toggle {
    transition: color 240ms ease-out;
  }

  .home-logo {
    transition: filter 240ms ease-out;
  }

  .site-footer a {
    transition: opacity 350ms cubic-bezier(.2, .65, .3, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-control,
  .control-art,
  .site-header nav a::after,
  .home-logo,
  .site-header nav a,
  .about-toggle,
  .menu-toggle,
  .moon-icon,
  .site-footer a {
    animation: none;
    transition: none;
  }

  .control-art {
    transform: none;
    filter: none;
  }
}