.project-invite {
  position: fixed;
  z-index: 18;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  max-width: calc(100% - 36px);
  box-sizing: border-box;
  padding: 10px 16px 10px 12px;
  border: 1px solid #15121012;
  border-radius: 15px;
  background: #d6fa31;
  color: #151210;
  box-shadow: 0 4px 18px #15121018;
  font: 500 12px/1.35 Sora, Inter, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: project-invite-enter 360ms cubic-bezier(.22, 1, .36, 1) both;
}
.project-invite[hidden] { display: none !important; }
.project-invite:focus-visible { outline: 2px solid #151210; outline-offset: 4px; }
.project-invite__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  perspective: 160px;
  transition: transform 200ms ease;
}
.project-invite__flip {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: url('/assets/v-logo.svg') center / contain no-repeat;
  mask: url('/assets/v-logo.svg') center / contain no-repeat;
  backface-visibility: visible;
  transform: rotateY(0deg);
  animation: project-invite-flip 9s cubic-bezier(.65, 0, .25, 1) infinite;
}
@keyframes project-invite-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes project-invite-flip {
  0% { transform: rotateY(0deg); }
  16%, 100% { transform: rotateY(360deg); }
}
@media (hover: hover) and (pointer: fine) {
  .project-invite:hover .project-invite__mark { transform: scale(1.08); }
}
@media (max-width: 620px) {
  .project-invite {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100% - 24px);
    min-height: 44px;
    padding: 9px 13px 9px 10px;
    border-radius: 13px;
    font-size: 11px;
  }
  .project-invite__mark { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-invite, .project-invite__flip { animation: none; }
  .project-invite__mark { transition: none; }
  .project-invite:hover .project-invite__mark { transform: none; }
}