.yarn-toy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: min(36rem, 78vh);
  overflow: visible;
  pointer-events: none;
}

.yarn-string {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.yarn-string path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yarn-string .yarn-string-shadow {
  stroke: rgba(23, 23, 23, 0.22);
  stroke-width: 10;
}

.yarn-string #yarn-string-path {
  stroke: url("#yarn-rope-pattern") #cb5144;
  stroke-width: 8;
}

.yarn-ball {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(10rem, 15vw, 14rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  filter: drop-shadow(0 14px 14px rgba(23, 23, 23, 0.18));
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.yarn-ball:active {
  cursor: grabbing;
}

.yarn-ball:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 6px;
}

.yarn-ball img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.yarn-instructions {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .intro {
    padding-top: clamp(18rem, 30vw, 22rem);
  }
}

@media (max-width: 900px) {
  .yarn-toy {
    height: 22rem;
  }

  .yarn-ball {
    width: clamp(6.5rem, 20vw, 8rem);
  }

  .intro {
    padding-top: clamp(13rem, 40vw, 17rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yarn-ball {
    filter: drop-shadow(0 8px 10px rgba(23, 23, 23, 0.14));
  }
}