.pin-stack {
  position: absolute;
  left: 50%;
  top: var(--shear-line-position, 48%);
  transform: translateX(-50%);
  width: clamp(28px, 58%, 52px);
  height: 0;
  z-index: 1;
}

.driver-pin,
.key-pin {
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  box-shadow: inset 0 8px 10px rgba(255, 255, 255, 0.17);
}

.driver-pin {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: var(--driver-height);
  background: linear-gradient(135deg, var(--pin-driver), color-mix(in srgb, var(--pin-driver) 70%, #111 30%));
}

.driver-pin.spool {
  clip-path: polygon(0 0, 100% 0, 74% 34%, 74% 66%, 100% 100%, 0 100%, 26% 66%, 26% 34%);
}

.driver-pin.serrated {
  background:
    repeating-linear-gradient(to bottom, transparent 0 9px, rgba(0, 0, 0, 0.28) 9px 12px),
    linear-gradient(135deg, var(--pin-driver), color-mix(in srgb, var(--pin-driver) 70%, #111 30%));
}

.driver-pin.spool-serrated {
  clip-path: polygon(0 0, 100% 0, 74% 34%, 74% 66%, 100% 100%, 0 100%, 26% 66%, 26% 34%);
  background:
    repeating-linear-gradient(to bottom, transparent 0 8px, rgba(0, 0, 0, 0.3) 8px 11px),
    linear-gradient(135deg, var(--pin-driver), color-mix(in srgb, var(--pin-driver) 70%, #111 30%));
}

.driver-pin.mushroom {
  clip-path: polygon(0 0, 100% 0, 88% 72%, 100% 100%, 0 100%, 12% 72%);
}

.driver-pin.double-mushroom {
  clip-path: polygon(12% 0, 88% 0, 100% 16%, 74% 50%, 100% 84%, 88% 100%, 12% 100%, 0 84%, 26% 50%, 0 16%);
}

.driver-pin.t-pin {
  clip-path: polygon(0 0, 100% 0, 100% 24%, 64% 24%, 64% 100%, 36% 100%, 36% 24%, 0 24%);
}

.driver-pin.barrel {
  clip-path: polygon(0 0, 100% 0, 100% 18%, 76% 18%, 76% 36%, 100% 36%, 100% 64%, 76% 64%, 76% 82%, 100% 82%, 100% 100%, 0 100%, 0 82%, 24% 82%, 24% 64%, 0 64%, 0 36%, 24% 36%, 24% 18%, 0 18%);
}

.driver-pin.gin {
  clip-path: polygon(0 0, 100% 0, 100% 72%, 66% 100%, 34% 100%, 0 72%);
}

.driver-pin.tree {
  clip-path: polygon(0 0, 100% 0, 100% 30%, 72% 30%, 72% 64%, 100% 86%, 88% 100%, 12% 100%, 0 86%, 28% 64%, 28% 30%, 0 30%);
}

.driver-pin.chess {
  clip-path: polygon(18% 0, 82% 0, 82% 18%, 62% 18%, 62% 36%, 82% 36%, 82% 64%, 62% 64%, 62% 82%, 82% 82%, 82% 100%, 18% 100%, 18% 82%, 38% 82%, 38% 64%, 18% 64%, 18% 36%, 38% 36%, 38% 18%, 18% 18%);
}

.driver-pin.custom {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25% 50%, rgba(0, 0, 0, 0.12) 50% 75%, transparent 75%),
    linear-gradient(135deg, var(--pin-driver), color-mix(in srgb, var(--pin-driver) 70%, #111 30%));
  background-size: 14px 14px, auto;
}

.key-pin {
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: var(--key-height);
  background: linear-gradient(135deg, var(--pin-key), color-mix(in srgb, var(--pin-key) 70%, #4b3510 30%));
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}

.key-pin.serrated {
  background:
    repeating-linear-gradient(to bottom, transparent 0 8px, rgba(0, 0, 0, 0.24) 8px 11px),
    linear-gradient(135deg, var(--pin-key), color-mix(in srgb, var(--pin-key) 70%, #4b3510 30%));
}

.key-pin.spool {
  clip-path: polygon(0 0, 100% 0, 78% 30%, 78% 62%, 100% 82%, 50% 100%, 0 82%, 22% 62%, 22% 30%);
}

.key-pin.mushroom {
  clip-path: polygon(0 0, 100% 0, 82% 60%, 100% 82%, 50% 100%, 0 82%, 18% 60%);
}

.key-pin.custom {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25% 50%, rgba(0, 0, 0, 0.12) 50% 75%, transparent 75%),
    linear-gradient(135deg, var(--pin-key), color-mix(in srgb, var(--pin-key) 70%, #4b3510 30%));
  background-size: 12px 12px, auto;
}