#tail-controller {
  --tail-ink: #efbed5;
  --tail-rgb: 239, 190, 213;
  position: fixed;
  z-index: 19;
  left: calc(20px + env(safe-area-inset-left, 0px));
  bottom: calc(252px + env(safe-area-inset-bottom, 0px));
  width: 112px;
  height: 112px;
  border: 1px solid rgba(var(--tail-rgb), .32);
  border-radius: 50%;
  color: var(--tail-ink);
  background: radial-gradient(circle at 40% 25%, rgba(var(--tail-rgb), .14), #261923a6 72%);
  box-shadow: inset 0 1px 1px #fff2, inset 0 0 0 9px #23182535, 0 8px 26px #160e2033;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body[data-form="shiny"] #tail-controller { --tail-ink: #a6dcff; --tail-rgb: 166, 220, 255; }
#tail-controller[hidden] { display: none; }
#tail-controller:focus-visible { outline: 2px solid var(--tail-ink); outline-offset: 5px; }
.tail-controller-knob {
  position: absolute;
  inset: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--tail-rgb), .5);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(var(--tail-rgb), .24), #382137bf);
  box-shadow: inset 0 1px 2px #fff3, 0 4px 12px #160e2044;
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
  pointer-events: none;
}
.tail-controller-knob svg { width: 32px; height: 32px; }
.tail-controller-label { position: absolute; bottom: 8px; width: 100%; text-align: center; font: 8px/1.2 sans-serif; letter-spacing: .2em; pointer-events: none; }
#tail-controller.is-held .tail-controller-knob { border-color: var(--tail-ink); }
@media (max-height: 500px) {
  #tail-controller { width: 96px; height: 96px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .tail-controller-knob { inset: 21px; }
}