.bench {
  max-width: 76rem;
  margin: 0 auto;
  padding: 28px 20px 96px;
}

.bench-head h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 5vw, 48px);
}

.bench-head p,
.bench-leave {
  max-width: 40rem;
  margin: 0 0 24px;
  color: color-mix(in srgb, var(--os-ground) 78%, transparent);
}

.bench-stations {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.bench-station {
  display: grid;
  gap: 6px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--os-blue) 28%, transparent);
  border-radius: var(--os-radius-md);
  background: color-mix(in srgb, var(--os-ground-void) 70%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bench-station[aria-current="step"] {
  border-color: var(--os-blue);
  box-shadow: inset 0 -3px 0 var(--os-blue);
}

.bench-station[data-done="1"] {
  box-shadow: inset 0 -3px 0 var(--os-green);
}

.bench-station strong {
  font-size: 13px;
}

.bench-station span {
  font-size: 12px;
  color: color-mix(in srgb, var(--os-ground) 64%, transparent);
}

.bench-station .bench-fill {
  height: 3px;
  border-radius: var(--os-radius-pill);
  background: var(--os-blue);
  transform-origin: left;
  transform: scaleX(0);
}

.bench-station[data-done="1"] .bench-fill,
.bench-station[aria-current="step"] .bench-fill {
  animation: bench-grow 720ms var(--ss-snap-easing, ease) forwards;
}

.bench-work {
  display: grid;
  gap: 16px;
}

@media (min-width: 960px) {
  .bench-work {
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    align-items: start;
  }
}

.bench-site {
  display: grid;
  gap: 8px;
  min-height: 280px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--os-blue) 32%, transparent);
  border-radius: var(--os-radius-md);
  background: color-mix(in srgb, var(--os-ground-void) 80%, transparent);
}

.bench-site > [hidden] {
  display: none;
}

.site-nav,
.site-hero,
.site-band,
.site-pages,
.site-lock {
  min-height: 36px;
  padding: 10px 12px;
  border-radius: var(--os-radius-sm);
  background: color-mix(in srgb, var(--os-blue) 14%, transparent);
  font-size: 13px;
  animation: bench-in 480ms var(--ss-silk-easing, ease);
}

.site-hero {
  min-height: 72px;
  font-size: 18px;
}

.bench-canvas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 280px;
}

.bench-stage {
  min-height: 240px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--os-blue) 30%, transparent);
  border-radius: var(--os-radius-md);
  background: color-mix(in srgb, var(--os-ink) 35%, transparent);
}

.bench-tile {
  opacity: 0;
  transform: translateY(10px);
  animation: bench-in 480ms var(--ss-silk-easing, ease) forwards;
}

.bench-tile + .bench-tile {
  animation-delay: 90ms;
}

.bench-tile h3,
.bench-tile p {
  margin: 0 0 8px;
  font-size: 13px;
}

.bench-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 3px;
  background: var(--os-blue);
}

@keyframes bench-grow {
  to { transform: scaleX(1); }
}

@keyframes bench-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .bench-stations,
  .bench-canvas {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bench-tile,
  .bench-station .bench-fill {
    animation: none;
    opacity: 1;
    transform: none;
  }
}