:root {
  --tmc-size: 48px;
  --tmc-color: #ffffff;
  --tmc-dot-scale: .18;
  --tmc-heading-scale: 1.45;
  --tmc-text-bg: rgba(8, 13, 11, .82);
  --tmc-z: 99999;
}

.tmc-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  z-index: var(--tmc-z);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity .22s ease;
  contain: layout style size;
  will-change: transform;
}

.tmc-cursor.is-visible { opacity: 1; }

.tmc-cursor__circle {
  position: absolute;
  top: calc(var(--tmc-size) / -2);
  left: calc(var(--tmc-size) / -2);
  width: var(--tmc-size);
  height: var(--tmc-size);
  border-radius: 999px;
  background: var(--tmc-color);
  transform: scale(var(--tmc-dot-scale));
  transition: transform .28s cubic-bezier(.22,1,.36,1), background .2s ease, opacity .2s ease;
  will-change: transform;
}

@supports (mix-blend-mode: exclusion) {
  .tmc-cursor.is-blend {
    mix-blend-mode: exclusion;
  }
}

.tmc-cursor.is-heading .tmc-cursor__circle,
.tmc-cursor.is-opaque .tmc-cursor__circle {
  transform: scale(var(--tmc-heading-scale));
}

.tmc-cursor.is-pointer .tmc-cursor__circle {
  transform: scale(0);
}

.tmc-cursor.is-active .tmc-cursor__circle {
  transform: scale(calc(var(--tmc-dot-scale) + .06));
}

.tmc-cursor.is-heading.is-active .tmc-cursor__circle,
.tmc-cursor.is-opaque.is-active .tmc-cursor__circle {
  transform: scale(1.28);
}

.tmc-cursor__text {
  position: absolute;
  top: -22px;
  left: -22px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--tmc-text-bg);
  color: #fff;
  font: 600 12px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  opacity: 0;
  transform: scale(.25) rotate(8deg);
  transition: opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1);
  backdrop-filter: blur(10px);
}

.tmc-cursor.has-text .tmc-cursor__circle { transform: scale(1.7); opacity: .9; }
.tmc-cursor.has-text .tmc-cursor__text { opacity: 1; transform: scale(1) rotate(0); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .tmc-cursor { display: none !important; }
}