.sky-wing-btn {
  --wing-size: 140px;
  --wing-press-scale: 1.15;
  --wing-color: #ffff87;
  --wing-stroke: var(--wing-color);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wing-size);
  height: var(--wing-size);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.34, 1.56, .64, 1), filter 220ms ease;
}

.sky-wing-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 50%;
}

.sky-wing-btn.is-pressing {
  transform: scale(var(--wing-press-scale));
  filter: drop-shadow(0 0 12px rgb(255 240 128 / 65%));
}

.sky-wing-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sky-wing-arc {
  fill: var(--wing-color, #ffff87);
  stroke: var(--wing-stroke, var(--wing-color, #ffff87));
  stroke-width: 2;
  stroke-linejoin: round;
}

.sky-wing-drop {
  fill: #fff;
}

.sky-wing-red-dot[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sky-wing-btn {
    transition: none;
  }
}