.tn-note{
  --tn-rot: 0deg;
  opacity: 0;
  transition: opacity 300ms ease-in;
  transform: rotate(var(--tn-rot));
}
.tn-note.tn-show{ opacity: 1; }
.tn-note.tn-hide{ opacity: 0; }

.tn-pos-inline{
  position: relative;
}
.tn-pos-center{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--tn-rot));
  z-index: 9999;
}
.tn-pos-tl{
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 9999;
}
.tn-pos-tr{
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 9999;
}
.tn-pos-br{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
}
.tn-pos-bl{
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
}
.tn-pos-tl,
.tn-pos-tr,
.tn-pos-br,
.tn-pos-bl{
  transform: rotate(var(--tn-rot));
}