@media (pointer: fine) {
  body {
    cursor: none;
  }

  .cursorOuter, .cursorInner {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
  }

  .cursorOuter {
    width: 40px;
    height: 40px;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease;
  }

  .cursorInner {
    width: 6px;
    height: 6px;
    background-color: var(--yellow);
    border-radius: 50%;
    transition: opacity 0.3s ease;
  }

  /* Hover states */
  .cursorOuter.hoverActive {
    width: 60px;
    height: 60px;
    background-color: rgba(245, 192, 0, 0.15);
  }

  /* Text mode */
  .cursorOuter.textMode {
    width: 2px;
    height: 24px;
    border-radius: 0;
    background-color: var(--yellow);
    border: none;
  }

  .cursorInner.textMode {
    opacity: 0;
  }
}