/* Osmo Supply — Velocity Based Custom Cursor (resource CSS, unchanged) */
.cursor {
  z-index: 100;
  pointer-events: none;
  position: fixed;
  inset: 0% auto auto 0%;
}

.cursor-inner {
  width: 2em;
}

.cursor-inner.pointer {
  width: 2.5em;
}

/* Hide browser default cursor */
html {
  cursor: none !important;
}

/* Hide custom cursor and pointer cursor */
.cursor,
.cursor-inner.pointer{
  display: none;
}

/* Show custom cursor only when user is on the site */
html:hover .cursor{
  display: block;
}

/* Replace normal cursor with pointer on hover of link/button/custom element */
body:has( a:hover) .cursor-inner.pointer,
body:has( button:hover) .cursor-inner.pointer,
body:has( [data-cursor]:hover) .cursor-inner.pointer{
  display: block;
}
body:has( a:hover) .cursor-inner.regular,
body:has( button:hover) .cursor-inner.regular,
body:has( [data-cursor]:hover) .cursor-inner.regular{
  display: none;
}

/* Hide custom cursor on touch screens */
@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none !important;
  }
}

/* Fitting it into this site (not part of the resource) */

/* Only this cursor ever shows over the page, never the browser's own next to it: on a mouse or a pen the browser's is
   hidden from the first frame (data-cursor-ready, set in the page's head and kept by cursor.js), and only without that
   (a touch screen, or a browser that can't put this one on top) does the browser's show. This one appears once the page
   knows where the mouse is (cursor.js sets data-cursor-live when it moves or comes over something, or when the page
   before in this tab hands it over) and goes when the mouse leaves, on a touch, a drag or a right-click menu, so it
   never sits in the top-left corner. While it is on it shows even before the browser has seen the mouse on this page
   (a cursor handed over). */
html:not([data-cursor-ready]) {
  cursor: auto !important;
}

html:not([data-cursor-live]) .cursor {
  display: none;
}

html[data-cursor-live] .cursor {
  display: block;
}

/* A cursor handed over onto a link or a button is the hand until the mouse moves (then :hover decides, as above). */
html[data-cursor-hint="pointer"] .cursor-inner.pointer {
  display: block;
}

html[data-cursor-hint="pointer"] .cursor-inner.regular {
  display: none;
}

/* No other cursor shows through either: the grid's grab hand, the buttons' pointers, Milo's grab, a text's I-beam. */
html[data-cursor-ready],
html[data-cursor-ready] *,
html[data-cursor-ready] *::before,
html[data-cursor-ready] *::after,
html[data-cursor-ready] ::backdrop {
  cursor: none !important;
}

/* Over everything: the splash (2000), the guide (1000), the corner button. cursor.js also shows it as a popover, in
   the top layer, so the other format's box viewer (a modal <dialog>) doesn't cover it; these undo a popover's default
   box. The same size on both formats (the other one sizes its text with the window). */
.cursor {
  z-index: 2147483647;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  width: auto;
  height: auto;
  font-size: 16px;
}

/* The hand's fingertip is where it clicks, like the browser's own hand. */
.cursor-inner.pointer {
  margin-left: -0.88em;
}

/* The other format's big footer letters only answer a click while they can move. */
body:has(.footer-nothin-svg[aria-disabled="true"] [data-cursor]:hover) .cursor-inner.pointer {
  display: none;
}

body:has(.footer-nothin-svg[aria-disabled="true"] [data-cursor]:hover) .cursor-inner.regular {
  display: block;
}

@media print {
  .cursor {
    display: none !important;
  }
}