static/css/styles.css

:root {
  --ring-size: 32px;
  --dot-size: 6px;
}

* { cursor: none; } /* use custom cursor */

/* Custom cursor */
#cursor-dot, #cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  transition: transform 0.08s ease-out, opacity 0.2s ease-out;
}

#cursor-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  margin-left: calc(var(--dot-size) * -0.5);
  margin-top: calc(var(--dot-size) * -0.5);
  background: white;
  border-radius: 9999px;
  mix-blend-mode: difference; /* crisp candy feel */
}

#cursor-ring {
  width: var(--ring-size);
  height: var(--ring-size);
  margin-left: calc(var(--ring-size) * -0.5);
  margin-top: calc(var(--ring-size) * -0.5);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 9999px;
  backdrop-filter: blur(2px);
}

/* Scroll reveal defaults; JS will remove opacity/translate */
.reveal {
  will-change: transform, opacity;
}

/* file input nicer in dark bg (safari fix) */
input[type="file"]::file-selector-button {
  cursor: pointer;
}

/* Reduce selection glow */
::selection {
  background: rgba(255,255,255,0.2);
}

/* Smooth fonts */
html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }

* { cursor: none !important; }
input, button, textarea, select, label { cursor: none !important; }