.cur-dot, .cur-box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.cur-dot {
  width: 26px;
  height: 27.0833px;
  margin: -2.1667px 0 0 -2.1667px;
  color: var(--interactive);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
  transition: opacity var(--dur-moderate) var(--ease-productive),
              color var(--dur-fast-02) var(--ease-productive);
}

.cur-dot .cur-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cur-dot .cur-arrow {
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.cur-box {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--border-strong);
  transition: opacity var(--dur-moderate) var(--ease-productive),
              width var(--dur-fast-02) var(--ease-productive),
              height var(--dur-fast-02) var(--ease-productive),
              margin var(--dur-fast-02) var(--ease-productive),
              border-color var(--dur-fast-02) var(--ease-productive),
              background var(--dur-fast-02) var(--ease-productive);
}

html.cursor-on .cur-dot,
html.cursor-on .cur-box { opacity: 1; }

html.cursor-on,
html.cursor-on * { cursor: none !important; }

.cur-box.hot {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-color: var(--interactive);
  background: rgba(66, 190, 101, 0.12);
}

:root[data-accent="blue"] .cur-box.hot { background: rgba(69, 137, 255, 0.12); }
.cur-box.inv { border-color: #161616; }
.cur-dot.inv { color: var(--accent-on-light); }
.cur-box.press { width: 12px; height: 12px; margin: -6px 0 0 -6px; }