.catops-trigger {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  border: 0;
  background: transparent;
  color: #f3f5ff;
  font: 700 20px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -.08em;
  cursor: crosshair;
  transform: translate(-50%, -50%);
}

.catops-trigger:focus-visible {
  outline: 1px solid #b8ff5a;
  outline-offset: 8px;
  border-radius: 50%;
}

.catops-scene {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.catops-cat,
.catops-mouse {
  position: fixed;
  top: 0;
  left: 0;
  will-change: transform;
}

.catops-cat {
  width: 96px;
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .48));
  transform-origin: center;
}

.catops-cat svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.catops-cat .catops-body,
.catops-cat .catops-head {
  fill: #111216;
  stroke: #8f939b;
  stroke-width: 1.35;
  stroke-linejoin: round;
}

.catops-cat circle {
  fill: #d7dadf;
}

.catops-tail,
.catops-leg,
.catops-mouth,
.catops-whiskers {
  fill: none;
  stroke: #8f939b;
  stroke-width: 1.6;
  stroke-linecap: square;
}

.catops-running .catops-tail {
  animation: catops-tail .42s ease-in-out infinite alternate;
  transform-origin: 30px 42px;
}

.catops-running .catops-leg-front,
.catops-running .catops-leg-back {
  animation: catops-paws .25s ease-in-out infinite alternate;
  transform-origin: center 53px;
}

.catops-running .catops-leg-back {
  animation-direction: alternate-reverse;
}

.catops-mouse {
  width: 26px;
  height: 11px;
  border: 1px solid #686b71;
  border-radius: 65% 72% 38% 42%;
  background: #24262b;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .4);
}

.catops-mouse::before,
.catops-mouse::after {
  content: "";
  position: absolute;
}

.catops-mouse::before {
  top: -4px;
  right: 3px;
  width: 6px;
  height: 6px;
  border: 1px solid #686b71;
  border-radius: 50%;
  background: #202126;
}

.catops-mouse::after {
  top: 8px;
  left: -17px;
  width: 20px;
  height: 10px;
  border-top: 1px solid #9ea2b1;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.catops-mouse i {
  position: absolute;
  top: 5px;
  right: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #d7dadf;
}

.catops-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 31;
  margin: 0;
  padding: 11px 15px;
  border: 1px solid #626770;
  border-radius: 0;
  background: rgba(8, 9, 12, .96);
  color: #c9cdd4;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font: 700 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-align: center;
  transform: translateX(-50%);
}

.catops-incident .toolbox-orbit {
  border-color: rgba(185, 190, 199, .58);
  box-shadow: inset 0 0 70px rgba(180, 185, 195, .04), 0 0 80px rgba(0, 0, 0, .28);
}

.catops-incident .catops-trigger {
  color: #d5d8de;
  text-shadow: 0 0 10px rgba(213, 216, 222, .28);
}

.catops-incident [data-catops-heading] {
  animation: catops-glitch .18s steps(2, end) 3;
}

@keyframes catops-tail {
  to { transform: rotate(18deg); }
}

@keyframes catops-paws {
  to { transform: translateX(7px); }
}

@keyframes catops-glitch {
  25% { transform: translateX(-2px); opacity: .72; }
  75% { transform: translateX(2px); filter: contrast(1.35); }
}

@media (max-width: 800px) {
  [data-catops-mobile-trigger] {
    cursor: pointer;
    user-select: none;
  }

  .catops-cat { width: 76px; }
  .catops-toast { bottom: 18px; width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .catops-cat *,
  .catops-incident [data-catops-heading] {
    animation: none !important;
  }
}