@media (pointer: fine) {
  html.has-brk-site-cursor,
  html.has-brk-site-cursor body,
  html.has-brk-site-cursor body * {
    cursor: none !important;
  }

  html.has-brk-site-cursor input:is(
    [type="text"],
    [type="url"],
    [type="number"],
    [type="email"],
    [type="search"],
    [type="password"],
    [type="tel"]
  ),
  html.has-brk-site-cursor textarea,
  html.has-brk-site-cursor [contenteditable="true"] {
    cursor: text !important;
  }

  .brk-site-cursor {
    --brk-cursor-x: -100px;
    --brk-cursor-y: -100px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483647;
    width: 40px;
    height: 42px;
    opacity: 0;
    pointer-events: none;
    background: url("./clicker.png") center / 100% 100% no-repeat;
    transform: translate3d(
      calc(var(--brk-cursor-x) - 9px),
      calc(var(--brk-cursor-y) - 6px),
      0
    );
    contain: layout paint style;
    will-change: transform;
  }

  .brk-site-cursor.is-visible {
    opacity: 1;
  }

  .brk-site-cursor.is-pressed {
    background-image: url("./clicked.png");
  }

  .brk-site-cursor.is-text-mode {
    opacity: 0;
  }
}