.cursor {
  left: 0;
  top: 0;
  z-index: 3001;
  width: 9px;
  height: 9px;
  border: 0;
  opacity: 0;
  background: #fff7df;
  mix-blend-mode: normal;
  box-shadow: 0 0 5px #fff, 0 0 11px #ffb000, 0 0 22px #ff6b00;
  transition: width .18s, height .18s, opacity .18s, box-shadow .18s;
}

.cursor.visible { opacity: 1; }

.cursor.hot {
  width: 15px;
  height: 15px;
  box-shadow: 0 0 7px #fff, 0 0 18px #ffb000, 0 0 34px #ff6b00;
}

.spark-canvas {
  position: fixed;
  z-index: 3000;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (pointer: fine) {
  html,
  body,
  a,
  button,
  input,
  select,
  textarea,
  .project {
    cursor: none !important;
  }
}

@media (max-width: 1000px), (pointer: coarse) {
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .spark-canvas { display: none; }
}