@media (min-width: 768px) {
  /* Reserve room for Practice before the existing header actions. */
  html body .header-section.has-trick-lab-link {
    box-sizing: border-box;
    min-height: 44px;
    padding-right: 148px !important;
  }

  html body .header-section.has-trick-lab-link .settings-install-button {
    right: 146px !important;
  }

  html.ttr-install-action-visible body .header-section.has-trick-lab-link {
    padding-right: 260px !important;
  }
}

.trick-lab-link {
  position: absolute;
  top: 50%;
  right: 100px;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #b79aff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.trick-lab-link-ring {
  display: block;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  padding: 1.5px;
  border-radius: 50%;
  background: linear-gradient(120deg, #5ee7f2, #b79aff, #f999d3, #5ee7f2);
  background-size: 300% 300%;
  background-position: 0% 50%;
  box-shadow: 0 0 10px rgba(183, 154, 255, 0.3);
  animation: trick-lab-link-shimmer 8s ease-in-out infinite;
}

.trick-lab-link-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #000;
}

.trick-lab-link-icon svg {
  display: block;
  transform: translateX(1px);
}

.trick-lab-link:hover .trick-lab-link-ring {
  box-shadow: 0 0 14px rgba(183, 154, 255, 0.45);
}

.trick-lab-link:focus-visible {
  outline: 2px solid #b79aff;
  outline-offset: 1px;
}

@keyframes trick-lab-link-shimmer {
  0%, 55%, 100% { background-position: 0% 50%; }
  78% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .trick-lab-link-ring { animation: none; }
}
