/* Reuse the physical magnets in the primary space, with the same board palette. */
:root {
  --craie-line: var(--line);
  --craie-ink: var(--chalk);
  --craie-ink-soft: var(--chalk-soft);
  --craie-sage: var(--raised);
  --font-display: "CHAWP", "Patrick Hand", sans-serif;
  --font-body: "Patrick Hand", sans-serif;
  --magnet-blue: var(--blue);
  --magnet-orange: var(--orange);
  --magnet-green: var(--green);
}
.primary-manipulation {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 3rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.manipulation-copy p { max-width: 45ch; }
.manipulation-copy p + p { font-size: 1.1rem; color: var(--chalk-soft); }
.primary-manipulation .magnet-demo {
  container-type: inline-size;
  min-width: 0;
  margin: 0;
}
.primary-manipulation .magnet-demo h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.primary-manipulation .magnet-tray { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
.primary-manipulation .magnet-slot,
.primary-manipulation .magnet-object { min-width: 48px; min-height: 48px; }
.primary-manipulation .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 900px) {
  .primary-manipulation { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 380px) {
  .primary-manipulation .magnet-group { padding: .35rem; }
}