.bench-carousel {
  --bench-gap: 18px;
  position: relative;
  min-width: 0;
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid #4d314477;
  color: var(--pink, #ffd0e7);
}

.bench-carousel .carousel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.bench-carousel .carousel-heading h2 {
  margin: 0;
  color: #f7d8ea;
  font: 450 clamp(17px, 2vw, 24px)/1.4 var(--display, sans-serif);
  letter-spacing: -.05em;
}

.bench-carousel .carousel-controls {
  display: flex;
  flex: none;
  gap: 8px;
}

.bench-carousel .carousel-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #80556d;
  border-radius: 50%;
  background: #140c1480;
  color: var(--pink, #ffd0e7);
  font: 22px/1 var(--mono, monospace);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.bench-carousel .carousel-controls button:not(:disabled):hover {
  border-color: var(--pink, #ffd0e7);
  background: #44213799;
}

.bench-carousel .carousel-controls button:disabled {
  opacity: .3;
  cursor: default;
}

.bench-carousel .bench-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--bench-gap)) / 4.4);
  gap: var(--bench-gap);
  width: 100%;
  min-width: 0;
  padding: 7px 6px 17px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #93637f #21131e;
  -webkit-overflow-scrolling: touch;
}

.bench-carousel .bench-track::-webkit-scrollbar { height: 5px; }
.bench-carousel .bench-track::-webkit-scrollbar-track { background: #21131e; border-radius: 8px; }
.bench-carousel .bench-track::-webkit-scrollbar-thumb { background: #93637f; border-radius: 8px; }

.bench-carousel .bench-card {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 192px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 19px 10px 17px;
  border: 1px solid #b77c9d20;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 36%, #d97caa0b, transparent 72%);
  color: var(--pink, #ffd0e7);
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color .18s, background-color .18s;
}

.bench-carousel .bench-card:hover {
  border-color: #d49cbe85;
  background-color: #30172466;
}

.bench-carousel .bench-card-name {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  color: #efd4e5;
  font: 14px/1.5 var(--pixel, monospace);
  overflow-wrap: anywhere;
}

.bench-carousel .bench-card-status {
  display: block;
  color: #b79aac;
  font: 9px/1.5 var(--mono, monospace);
}

.bench-carousel .is-available .bench-card-status { color: var(--pink, #ffd0e7); }
.bench-carousel .is-available { border-color: #cd89af59; }

.bench-carousel :is(.bench-track, .bench-card, .carousel-controls button):focus-visible {
  outline: 2px solid var(--pink, #ffd0e7);
  outline-offset: 3px;
}

/* Also styles benchmarkIcon() when used on a benchmark's own page. */
.benchmark-icon {
  display: block;
  flex: none;
  width: 78px;
  height: 78px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--pink, #ffd0e7);
  filter: drop-shadow(0 0 8px #ffd0e722);
  animation: bench-float 7s ease-in-out infinite;
}

.bench-card:nth-child(3n+2) .benchmark-icon { animation-delay: -3s; }
.bench-card:nth-child(3n+3) .benchmark-icon { animation-delay: -5s; }
.benchmark-icon .blink { animation: bench-blink 7s infinite; transform-origin: 50px 44px; }
.benchmark-icon .steam { animation: bench-steam 5s ease-in-out infinite; }
.benchmark-icon :is(.cursor, .battery) { animation: bench-cursor 3s steps(1) infinite; }
.benchmark-icon .door-light { animation: bench-glow 5s ease-in-out infinite; }
.benchmark-icon .bench-heart { animation: bench-heartbeat 4s ease-in-out infinite; transform-origin: 50px 48px; }
.benchmark-icon-nonsense { animation-name: bench-swim; }
.benchmark-icon-pattern { animation-name: bench-turn; }

@keyframes bench-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes bench-turn { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes bench-swim { 0%,100% { transform: translateX(-3px) rotate(-5deg); } 50% { transform: translateX(3px) rotate(5deg); } }
@keyframes bench-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.1); } }
@keyframes bench-steam { 0%,100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes bench-cursor { 0%,70%,100% { opacity: 1; } 80%,90% { opacity: .2; } }
@keyframes bench-glow { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes bench-heartbeat { 0%,20%,40%,100% { transform: scale(1); } 10%,30% { transform: scale(1.045); } }

.stars-paused .benchmark-icon,
.stars-paused .benchmark-icon * { animation-play-state: paused !important; }
.stars-paused .bench-carousel * { scroll-behavior: auto !important; }

@media (max-width: 900px) {
  .bench-carousel .bench-track { grid-auto-columns: calc((100% - 3 * var(--bench-gap)) / 3.25); }
}

@media (max-width: 550px) {
  .bench-carousel { --bench-gap: 12px; margin-top: 38px; padding-top: 22px; }
  .bench-carousel .carousel-heading { gap: 12px; margin-bottom: 12px; }
  .bench-carousel .carousel-heading h2 { font-size: 17px; }
  .bench-carousel .carousel-controls { gap: 5px; }
  .bench-carousel .bench-track { grid-auto-columns: calc((100% - 2 * var(--bench-gap)) / 2.15); }
  .bench-carousel .bench-card { min-height: 168px; padding: 16px 7px; border-radius: 12px; }
  .bench-carousel .bench-card-name { font-size: 12px; }
  .bench-carousel .bench-card-status { font-size: 8px; }
  .bench-carousel .benchmark-icon { width: 65px; height: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  .benchmark-icon, .benchmark-icon * { animation: none !important; }
  .bench-carousel * { scroll-behavior: auto !important; transition: none !important; }
}