:root {
  --cursor-size: 20px;
  --cursor-size-on: 10px;
  --cursor-ring: 1px;
  --cursor-blur: 25px;
  --cursor-rgb: 0 0 0;
  --cursor-line: 0.2;
  --cursor-fill: 0.06;
  --cursor-fill-on: 0.16;
  --cursor-lift: none;
  --cursor-lift-on: 0 2px 4px rgb(0 0 0 / 0.06);
  --cursor-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="dark"] {
  --cursor-rgb: 255 255 255;
  --cursor-line: 1;
  --cursor-fill: 0.1;
  --cursor-fill-on: 0.65;
  --cursor-lift-on: none;
}

body[data-cursor="on"],
body[data-cursor="on"] * { cursor: none !important; }

[data-cursor-hide] { cursor: none; }

.cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  pointer-events: none;
  will-change: transform;
}

.cursor[data-visible="false"] { visibility: hidden; }

.cursor.is-placing,
.cursor.is-placing .cursor-dot { transition: none !important; }

.cursor[data-engaged="true"] {
  --cursor-size: var(--cursor-size-on);
  --cursor-fill: var(--cursor-fill-on);
  --cursor-lift: var(--cursor-lift-on);
}

.cursor[data-pressed="true"] { --cursor-size: var(--cursor-size-on); }

.cursor-dot {
  flex: none;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border: var(--cursor-ring) solid rgb(var(--cursor-rgb) / var(--cursor-line));
  border-radius: 50%;
  background: rgb(var(--cursor-rgb) / var(--cursor-fill));
  box-shadow: var(--cursor-lift);
  -webkit-backdrop-filter: blur(var(--cursor-blur));
  backdrop-filter: blur(var(--cursor-blur));
  transition:
    width 160ms var(--cursor-ease),
    height 160ms var(--cursor-ease),
    background-color 160ms var(--cursor-ease),
    border-color 160ms var(--cursor-ease),
    box-shadow 160ms var(--cursor-ease);
}

.cursor[data-tint] .cursor-dot {
  border-width: var(--stroke-small);
  border-color: var(--expressive-red);
  background-color: var(--background-extension-negative-transparent);
}

.cursor[data-tint][data-engaged="true"] .cursor-dot { background-color: var(--background-extension-negative-transparent-pressed); }

.cursor.is-leaving .cursor-dot { transition-duration: 80ms; }

.cursor[data-morph="on"] {
  transition: translate var(--morph-travel, 220ms) var(--morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.cursor[data-morph="on"] .cursor-dot {
  width: var(--cursor-w);
  height: var(--cursor-h);
  border-radius: var(--nav-inner);
  border: var(--nav-thumb-border) solid var(--nav-thumb-edge);
  background: var(--nav-thumb);
  box-shadow: var(--nav-thumb-inset);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition:
    width var(--morph-w, 260ms) var(--morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) var(--morph-delay, 0ms),
    height var(--morph-h, 260ms) var(--morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1)) var(--morph-delay, 0ms),
    border-radius 200ms ease var(--morph-delay, 0ms),
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease,
    scale 240ms var(--morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1)),
    rotate 260ms var(--morph-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.cursor[data-morph="on"][data-round="true"] .cursor-dot { border-radius: 50%; }

.cursor {
  --morph-travel: 240ms;
  --morph-w: 260ms;
  --morph-h: 260ms;
  --morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.cursor[data-edge="start"] .cursor-dot { transform-origin: left center; }
.cursor[data-edge="end"] .cursor-dot { transform-origin: right center; }

.cursor[data-morph="on"][data-tilt="left"] .cursor-dot { rotate: -1.4deg; }
.cursor[data-morph="on"][data-tilt="right"] .cursor-dot { rotate: 1.4deg; }

@media (prefers-reduced-motion: reduce) {
  .cursor-dot { transition-duration: 1ms; }
}