/* A little desktop instrument: precise tip, spring outline, contextual file tag. */
@media (any-hover: hover) and (any-pointer: fine) {
  body[data-direction="desktop"][data-desk-cursor="active"],
  body[data-direction="desktop"][data-desk-cursor="active"] * {
    cursor: none !important;
  }
}
.desk-cursor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  color: var(--desk-accent);
  pointer-events: none;
  user-select: none;
}
.desk-cursor::backdrop {
  display: none;
}
.desk-cursor[data-visible="false"] {
  visibility: hidden;
}
.cursor-point,
.cursor-follower {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.cursor-arrow {
  position: absolute;
  left: -2px;
  top: -2px;
  width: 26px;
  height: 30px;
  overflow: visible;
  fill: var(--desk-accent);
  stroke: var(--desk-surface);
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px #0005);
  transition:
    scale 130ms,
    rotate 170ms;
}
.cursor-move {
  display: none;
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--desk-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 var(--desk-surface))
    drop-shadow(0 -1px 0 var(--desk-surface));
}
.cursor-follower::before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--desk-accent);
  border-radius: 50%;
  opacity: 0.35;
  transition:
    width 180ms,
    height 180ms,
    left 180ms,
    top 180ms,
    opacity 180ms;
}
.desk-cursor[data-state="action"] .cursor-follower::before {
  width: 36px;
  height: 36px;
  left: -18px;
  top: -18px;
  opacity: 0.65;
}
.desk-cursor[data-state="move"] .cursor-arrow {
  display: none;
}
.desk-cursor[data-state="move"] .cursor-move {
  display: block;
}
.desk-cursor[data-state="move"] .cursor-follower::before {
  border-radius: 5px;
  width: 36px;
  height: 36px;
  left: -18px;
  top: -18px;
  opacity: 0.55;
}
.cursor-tag {
  position: absolute;
  top: 26px;
  left: 23px;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid var(--desk-accent);
  border-radius: 3px 8px 8px 8px;
  background: var(--desk-surface);
  color: var(--desk-accent);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--desk-accent), transparent 75%);
  font:
    9px/1 "IBM Plex Mono",
    monospace;
  letter-spacing: 0.045em;
}
.cursor-tag:empty {
  display: none;
}
.desk-cursor[data-flip-x="true"] .cursor-tag {
  left: auto;
  right: 18px;
}
.desk-cursor[data-flip-y="true"] .cursor-tag {
  top: auto;
  bottom: 18px;
}
.desk-cursor[data-pressed="true"] .cursor-arrow {
  scale: 0.83;
  rotate: -8deg;
}
.desk-cursor[data-pressed="true"] .cursor-follower::before {
  width: 22px;
  height: 22px;
  left: -11px;
  top: -11px;
  opacity: 1;
}
.desk-cursor[data-motion="off"] .cursor-follower {
  display: none;
}
.desk-cursor[data-motion="off"] * {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .desk-cursor * {
    transition: none;
  }
  .cursor-follower {
    display: none;
  }
}