@media (hover: hover) and (pointer: fine) {
      body.custom-cursor, body.custom-cursor * { cursor: none !important; }
    }
    #cursor-dot {
      position: fixed;
      top: 0; left: 0;
      width: 8px; height: 8px;
      background: var(--ink);
      border-radius: 50%;
      pointer-events: none;
      z-index: 99999;
      transform: translate(-50%, -50%) scale(1);
      transition: transform 0.15s ease, background 0.2s ease;
      will-change: left, top;
    }
    body.cursor-hover #cursor-dot {
      transform: translate(-50%, -50%) scale(1.75);
      background: var(--ink-faint);
    }
    @media (hover: none), (pointer: coarse) {
      #cursor-dot { display: none !important; }
    }
    .sparkle {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      font-size: 1rem;
      line-height: 1;
      animation: sparkle-fade 0.8s ease forwards;
      transform-origin: center;
      user-select: none;
    }
    @keyframes sparkle-fade {
      0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(var(--rot)); }
    }