.cursor-ant {
  --ant-body: #111111;
  --ant-highlight: #222222;
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  width: 22.4px;
  height: auto;
  aspect-ratio: 9 / 5;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  filter: drop-shadow(0 .35px .35px rgb(17 17 17 / 15%));
}
.cursor-ant.is-visible { opacity: 1; }
:is(.cursor-ant, .spider-prey) .ant-cuticle,
:is(.cursor-ant, .spider-prey) .ant-mandible,
:is(.cursor-ant, .spider-prey) .ant-leg-femur,
:is(.cursor-ant, .spider-prey) .ant-leg-tibia { fill: var(--ant-body); }
:is(.cursor-ant, .spider-prey) .ant-sheen { fill: var(--ant-highlight); }
:is(.cursor-ant, .spider-prey) .ant-detail,
:is(.cursor-ant, .spider-prey) .ant-seam {
  fill: none;
  stroke: var(--ant-highlight);
  stroke-width: .45;
  stroke-linecap: round;
}
:is(.cursor-ant, .spider-prey) .ant-eye { fill: var(--ant-body); stroke: var(--ant-highlight); stroke-width: .35; }
:is(.cursor-ant, .spider-prey) .ant-legs path,
:is(.cursor-ant, .spider-prey) .ant-scape,
:is(.cursor-ant, .spider-prey) .ant-flagellum { stroke-linecap: round; stroke-linejoin: round; }
:is(.cursor-ant, .spider-prey) .ant-leg-coxa { fill: none; stroke: var(--ant-body); stroke-width: 1.45; }
:is(.cursor-ant, .spider-prey) .ant-leg-tarsus { fill: none; stroke: var(--ant-body); stroke-width: .42; }
:is(.cursor-ant, .spider-prey) .ant-leg-shine { fill: none; stroke: var(--ant-highlight); stroke-width: .22; }
:is(.cursor-ant, .spider-prey) .ant-scape { fill: none; stroke: var(--ant-body); stroke-width: .82; }
:is(.cursor-ant, .spider-prey) .ant-flagellum { fill: none; stroke: var(--ant-body); stroke-width: .68; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.release-ants { border: 0; background: transparent; color: #222; font: 12px monospace; padding: 10px 0; white-space: nowrap; }
.release-ants:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.release-ants:disabled { opacity: .6; }
.ant-spider { position: fixed; z-index: 31; left: 0; top: 0; width: 76px; height: 60.8px; pointer-events: none; will-change: transform; }
.ant-spider > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spider-ground { fill: #171912; }
.spider-leg-coxa { fill: #55442e; }
.spider-leg-femur { fill: #705035; }
.spider-leg-patella { fill: #443324; }
.spider-leg-tibia { fill: #805637; }
.spider-leg-metatarsus { fill: #67492f; }
.spider-leg-tarsus { fill: #332f24; }
.spider-leg-bands { fill: #332b20; opacity: .62; }
.spider-leg-shine { fill: none; stroke: #c0a27c; stroke-width: .22; opacity: .45; }
.spider-leg-hair,.spider-fine-hair { fill: none; stroke: #6b6149; stroke-width: .16; stroke-linecap: butt; opacity: .8; }
.spider-marking { fill: none; stroke: #343b2a; stroke-width: .8; opacity: .45; stroke-linejoin: round; }
.spider-carapace-edge { fill: none; stroke: #baaa81; stroke-width: .8; opacity: .6; }
.spider-eye-shine { fill: none; stroke: #999a87; stroke-width: .18; stroke-linecap: round; }
.spider-palp { fill: #443e2b; }
.spider-jaws { fill: #11150f; }
.spider-prey { --ant-body: #111111; --ant-highlight: #222222; }
@media (max-width: 620px) { .header-actions { flex-direction: column; align-items: flex-end; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor-ant, .ant-spider, .release-ants { display: none; } }