:root {
  background: transparent !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: transparent !important;
  background-color: transparent !important;
}

body {
  user-select: none;
  -webkit-user-select: none;
}

.badge-app {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: transparent !important;
  background-color: transparent !important;
}

.badge-stage {
  position: relative;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: transparent !important;
  background-color: transparent !important;
}

#badgeCanvas {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  outline: none;

  background: transparent !important;
  background-color: transparent !important;

  cursor: grab;
  touch-action: none;
}

#badgeCanvas:active {
  cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
  #badgeCanvas {
    cursor: default;
  }
}