.np-problems {
  --np-ink: #3f433e;
  --np-line: #7a8078;
  --np-coral: #ee907c;
  --np-coral-deep: #a94f42;
  --np-blue: #82a9d8;
  --np-blue-deep: #426d9d;
  --np-yellow: #e9c96f;
  --np-yellow-deep: #95731c;
  --np-green: #91b99a;
  --np-green-deep: #4c7858;
  --np-paper: #fbfaf5;
  --np-grid: rgba(63, 67, 62, 0.075);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  width: min(920px, calc(100vw - 2rem));
  margin: 2rem 0 2.15rem 50%;
  transform: translateX(-50%);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.np-problems *,
.np-problems *::before,
.np-problems *::after {
  box-sizing: border-box;
}

.np-problem-card {
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--np-ink) 17%, transparent);
  border-radius: 0.75rem;
  background: var(--np-paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 8px 24px rgba(48, 47, 40, 0.045);
  cursor: help;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.np-problem-card:hover,
.np-problem-card:focus-visible {
  border-color: color-mix(in srgb, var(--np-ink) 34%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 12px 28px rgba(48, 47, 40, 0.09);
  transform: translateY(-2px);
}

.np-problem-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.np-problem-stage {
  position: relative;
  height: 168px;
  overflow: hidden;
  border-radius: 0.7rem 0.7rem 0 0;
  background-color: var(--np-paper);
  background-image: radial-gradient(circle, var(--np-grid) 1px, transparent 1px);
  background-position: 8px 8px;
  background-size: 16px 16px;
}

.np-problem-stage::after {
  position: absolute;
  right: -34px;
  bottom: -54px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--np-blue) 9%, transparent);
  content: "";
  pointer-events: none;
}

.np-problem-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0.72rem 0.82rem 0.76rem;
  border-top: 1px solid color-mix(in srgb, var(--np-ink) 13%, transparent);
  color: var(--np-ink);
  font-size: 0.84rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.np-problem-label strong {
  font-weight: 650;
}

.np-problem-hint {
  display: grid;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--np-ink) 25%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--np-ink) 70%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 700;
}

.np-problem-tooltip {
  position: absolute;
  z-index: 8;
  right: 0.68rem;
  bottom: 3.45rem;
  left: 0.68rem;
  padding: 0.7rem 0.76rem;
  border-radius: 0.5rem;
  background: #343833;
  box-shadow: 0 8px 22px rgba(24, 26, 23, 0.2);
  color: #f8f7f1;
  font-size: 0.72rem;
  line-height: 1.42;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.np-problem-tooltip::after {
  position: absolute;
  right: 0.55rem;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #343833;
  content: "";
  transform: rotate(45deg);
}

.np-problem-card:hover .np-problem-tooltip,
.np-problem-card:focus .np-problem-tooltip,
.np-problem-card:focus-within .np-problem-tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Graph coloring */

.np-graph-edge {
  position: absolute;
  z-index: 1;
  height: 1.5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--np-line) 65%, transparent);
  transform-origin: 0 50%;
}

.edge-ab { top: 36px; left: calc(50% - 76px); width: 152px; transform: rotate(0deg); }
.edge-bc { top: 36px; left: calc(50% + 76px); width: 78px; transform: rotate(56deg); }
.edge-cd { top: 101px; left: calc(50% + 120px); width: 185px; transform: rotate(168deg); }
.edge-de { top: 141px; left: calc(50% - 62px); width: 77px; transform: rotate(-147deg); }
.edge-ea { top: 99px; left: calc(50% - 127px); width: 80px; transform: rotate(-52deg); }
.edge-af { top: 36px; left: calc(50% - 76px); width: 97px; transform: rotate(38deg); }
.edge-bf { top: 36px; left: calc(50% + 76px); width: 97px; transform: rotate(142deg); }
.edge-df { top: 141px; left: calc(50% - 62px); width: 76px; transform: rotate(-36deg); }
.edge-ef { top: 99px; left: calc(50% - 127px); width: 127px; transform: rotate(-2deg); }

.np-graph-node {
  position: absolute;
  z-index: 2;
  width: 31px;
  height: 31px;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 50%;
  background: var(--np-coral);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--np-coral-deep) 45%, transparent),
    0 5px 12px rgba(48, 47, 40, 0.09);
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.np-graph-node::before,
.np-graph-node::after {
  position: absolute;
  content: "";
}

.np-graph-node::before {
  top: 11px;
  left: 9px;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--np-ink) 76%, transparent);
  box-shadow: 8px 0 color-mix(in srgb, var(--np-ink) 76%, transparent);
}

.np-graph-node::after {
  bottom: 7px;
  left: 12px;
  width: 7px;
  height: 4px;
  border-bottom: 1.4px solid color-mix(in srgb, var(--np-ink) 70%, transparent);
  border-radius: 0 0 8px 8px;
}

.node-a { top: 20px; left: calc(50% - 92px); }
.node-b { top: 20px; left: calc(50% + 60px); }
.node-c { top: 85px; left: calc(50% + 104px); }
.node-d { bottom: 12px; left: calc(50% - 77px); }
.node-e { top: 83px; left: calc(50% - 142px); }
.node-f { top: 80px; left: calc(50% - 15px); }

.node-palette-a { animation-name: np-palette-a; }
.node-palette-b {
  border-color: var(--np-blue-deep);
  background-color: var(--np-blue);
  animation-name: np-palette-b;
}
.node-palette-c {
  border-color: var(--np-yellow-deep);
  background-color: var(--np-yellow);
  animation-name: np-palette-c;
}

@keyframes np-palette-a {
  0%, 24%, 100% {
    border-color: var(--np-coral-deep);
    background-color: var(--np-coral);
  }
  34%, 58% {
    border-color: var(--np-blue-deep);
    background-color: var(--np-blue);
  }
  68%, 91% {
    border-color: var(--np-yellow-deep);
    background-color: var(--np-yellow);
  }
}

@keyframes np-palette-b {
  0%, 24%, 100% {
    border-color: var(--np-blue-deep);
    background-color: var(--np-blue);
  }
  34%, 58% {
    border-color: var(--np-yellow-deep);
    background-color: var(--np-yellow);
  }
  68%, 91% {
    border-color: var(--np-coral-deep);
    background-color: var(--np-coral);
  }
}

@keyframes np-palette-c {
  0%, 24%, 100% {
    border-color: var(--np-yellow-deep);
    background-color: var(--np-yellow);
  }
  34%, 58% {
    border-color: var(--np-coral-deep);
    background-color: var(--np-coral);
  }
  68%, 91% {
    border-color: var(--np-blue-deep);
    background-color: var(--np-blue);
  }
}

/* Bin packing */

.np-packing-shelf {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: calc(50% - 134px);
  width: 268px;
  height: 30px;
  border-bottom: 1.5px solid color-mix(in srgb, var(--np-line) 48%, transparent);
}

.np-packing-shelf::after {
  position: absolute;
  right: -1px;
  bottom: -4px;
  left: -1px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--np-line) 13%, transparent);
  content: "";
}

.np-box {
  position: absolute;
  bottom: 1px;
  width: 25px;
  height: 19px;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 4px;
  background: var(--np-coral);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--np-coral-deep) 42%, transparent);
  animation: np-pack 6.4s infinite cubic-bezier(0.6, 0, 0.3, 1);
}

.np-box::before {
  position: absolute;
  top: 6px;
  left: 7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--np-ink) 74%, transparent);
  box-shadow: 7px 0 color-mix(in srgb, var(--np-ink) 74%, transparent);
  content: "";
}

.box-a { left: 3px; --pack-x: 3px; --pack-mid-x: 2px; --pack-y: 104px; animation-delay: 0s; }
.box-b {
  left: 38px;
  width: 31px;
  height: 23px;
  --pack-x: -11px;
  --pack-mid-x: -6px;
  --pack-y: 85px;
  border-color: var(--np-blue-deep);
  background: var(--np-blue);
  animation-delay: -0.25s;
}
.box-c {
  left: 79px;
  width: 22px;
  height: 27px;
  --pack-x: 30px;
  --pack-mid-x: 17px;
  --pack-y: 104px;
  border-color: var(--np-yellow-deep);
  background: var(--np-yellow);
  animation-delay: -0.5s;
}
.box-d {
  left: 111px;
  width: 28px;
  height: 17px;
  --pack-x: 20px;
  --pack-mid-x: 11px;
  --pack-y: 77px;
  border-color: var(--np-green-deep);
  background: var(--np-green);
  animation-delay: -0.75s;
}
.box-e {
  left: 149px;
  width: 23px;
  height: 24px;
  --pack-x: 63px;
  --pack-mid-x: 35px;
  --pack-y: 104px;
  border-color: var(--np-coral-deep);
  background: var(--np-coral);
  animation-delay: -1s;
}
.box-f {
  left: 182px;
  width: 29px;
  height: 21px;
  --pack-x: 46px;
  --pack-mid-x: 25px;
  --pack-y: 80px;
  border-color: var(--np-blue-deep);
  background: var(--np-blue);
  animation-delay: -1.25s;
}

.np-bin {
  position: absolute;
  z-index: 1;
  bottom: 13px;
  width: 68px;
  height: 77px;
  border: 1.5px solid color-mix(in srgb, var(--np-line) 70%, transparent);
  border-top-style: dashed;
  border-radius: 5px 5px 11px 11px;
  background: color-mix(in srgb, var(--np-green) 8%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--np-line) 15%, transparent);
}

.np-bin::before {
  position: absolute;
  top: 9px;
  left: 7px;
  color: color-mix(in srgb, var(--np-line) 60%, transparent);
  content: "MAX";
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.43rem;
  letter-spacing: 0.08em;
}

.np-bin::after {
  position: absolute;
  top: 18px;
  right: 6px;
  left: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--np-line) 32%, transparent);
  content: "";
}

.bin-a { left: calc(50% - 138px); }
.bin-b { left: calc(50% - 34px); }
.bin-c { left: calc(50% + 70px); }

.np-bin span,
.np-bin i,
.np-bin b {
  position: absolute;
  bottom: 7px;
  display: block;
  border: 1px solid color-mix(in srgb, var(--np-line) 25%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--np-line) 7%, transparent);
}

.np-bin span { left: 7px; width: 22px; height: 19px; }
.np-bin i { right: 7px; width: 25px; height: 24px; }
.np-bin b { right: 7px; bottom: 35px; width: 25px; height: 15px; }

@keyframes np-pack {
  0%, 15% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  25% {
    opacity: 1;
    transform: translate(var(--pack-mid-x), -15px) rotate(5deg);
  }
  42%, 78% {
    opacity: 1;
    transform: translate(var(--pack-x), var(--pack-y)) rotate(0);
  }
  88% {
    opacity: 1;
    transform: translate(var(--pack-x), calc(var(--pack-y) + 3px)) rotate(0);
  }
  94% {
    opacity: 0;
    transform: translate(var(--pack-x), calc(var(--pack-y) + 3px)) rotate(0);
  }
  95% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

/* Generalized Sudoku */

.np-sudoku-board {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(4, 29px);
  grid-template-rows: repeat(4, 29px);
  overflow: hidden;
  border: 2px solid var(--np-ink);
  border-radius: 6px;
  background: var(--np-paper);
  box-shadow: 0 5px 15px rgba(48, 47, 40, 0.08);
  transform: translateX(-50%);
}

.np-sudoku-board > span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--np-line) 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--np-line) 36%, transparent);
  color: var(--np-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  font-weight: 650;
}

.np-sudoku-board > span:nth-child(4n + 2) {
  border-right: 2px solid color-mix(in srgb, var(--np-ink) 75%, transparent);
}

.np-sudoku-board > span:nth-child(n + 5):nth-child(-n + 8) {
  border-bottom: 2px solid color-mix(in srgb, var(--np-ink) 75%, transparent);
}

.np-sudoku-board > span:nth-child(4n) {
  border-right: 0;
}

.np-sudoku-board > span:nth-child(n + 13) {
  border-bottom: 0;
}

.np-sudoku-board > span:nth-child(8n + 1),
.np-sudoku-board > span:nth-child(8n + 4),
.np-sudoku-board > span:nth-child(8n + 6),
.np-sudoku-board > span:nth-child(8n + 7) {
  background: color-mix(in srgb, var(--np-blue) 8%, transparent);
}

.np-sudoku-board .is-solved {
  color: var(--np-blue-deep);
  animation: np-solve-cell 5.6s infinite ease-out;
}

.np-sudoku-board .solve-1 { animation-delay: 0s; }
.np-sudoku-board .solve-2 { animation-delay: 0.35s; }
.np-sudoku-board .solve-3 { animation-delay: 0.7s; }
.np-sudoku-board .solve-4 { animation-delay: 1.05s; }

.np-sudoku-cursor {
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 31px;
  width: 25px;
  height: 25px;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 4px;
  background: color-mix(in srgb, var(--np-coral) 18%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--np-coral) 9%, transparent);
  animation: np-sudoku-cursor 5.6s infinite ease-in-out;
}

.np-sudoku-cursor::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-yellow);
  box-shadow: 0 0 0 2px var(--np-paper);
  content: "";
}

@keyframes np-solve-cell {
  0%, 10% {
    opacity: 0;
    transform: scale(0.55);
  }
  18%, 82% {
    opacity: 1;
    transform: scale(1);
  }
  94%, 100% {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes np-sudoku-cursor {
  0%, 16% { transform: translate(0, 0); }
  25%, 36% { transform: translate(-29px, 29px); }
  45%, 56% { transform: translate(58px, 58px); }
  65%, 76% { transform: translate(29px, 87px); }
  88%, 100% { transform: translate(0, 0); }
}

/* Traveling salesperson */

.np-tour-route,
.np-tour-shortcut {
  position: absolute;
  z-index: 1;
  height: 1.5px;
  border-radius: 999px;
  transform-origin: 0 50%;
}

.np-tour-route {
  background: var(--np-green-deep);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--np-green) 8%, transparent);
  opacity: 0.7;
  animation: np-tour-route 5.8s infinite ease-in-out;
}

.np-tour-shortcut {
  height: 1px;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--np-line) 42%, transparent) 0 4px,
    transparent 4px 8px
  );
}

.tour-route-ab {
  top: 44px;
  left: calc(50% - 102px);
  width: 81px;
  transform: rotate(-14deg);
  animation-delay: 0s;
}

.tour-route-bc {
  top: 24px;
  left: calc(50% - 24px);
  width: 111px;
  transform: rotate(10deg);
  animation-delay: 0.9s;
}

.tour-route-cd {
  top: 44px;
  left: calc(50% + 85px);
  width: 62px;
  transform: rotate(66deg);
  animation-delay: 1.8s;
}

.tour-route-de {
  top: 101px;
  left: calc(50% + 110px);
  width: 80px;
  transform: rotate(152deg);
  animation-delay: 2.7s;
}

.tour-route-ef {
  top: 139px;
  left: calc(50% + 40px);
  width: 116px;
  transform: rotate(-175deg);
  animation-delay: 3.7s;
}

.tour-route-fa {
  top: 129px;
  left: calc(50% - 76px);
  width: 89px;
  transform: rotate(-107deg);
  animation-delay: 4.6s;
}

.tour-shortcut-ac {
  top: 44px;
  left: calc(50% - 102px);
  width: 187px;
}

.tour-shortcut-be {
  top: 24px;
  left: calc(50% - 24px);
  width: 136px;
  transform: rotate(62deg);
}

.np-tour-city {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--np-blue-deep);
  border-radius: 50% 50% 50% 5px;
  background: var(--np-blue);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--np-blue-deep) 40%, transparent),
    0 4px 10px rgba(48, 47, 40, 0.08);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.np-tour-city::after {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--np-paper);
  content: "";
}

.tour-city-a {
  top: 44px;
  left: calc(50% - 102px);
  border-color: var(--np-coral-deep);
  background: var(--np-coral);
}

.tour-city-b { top: 24px; left: calc(50% - 24px); }
.tour-city-c { top: 44px; left: calc(50% + 85px); }
.tour-city-d { top: 101px; left: calc(50% + 110px); }
.tour-city-e { top: 139px; left: calc(50% + 40px); }
.tour-city-f { top: 129px; left: calc(50% - 76px); }

.np-tour-traveler {
  position: absolute;
  z-index: 5;
  top: 39px;
  left: calc(50% - 109px);
  width: 14px;
  height: 10px;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 5px 7px 4px 4px;
  background: var(--np-coral);
  box-shadow: 0 1px 3px rgba(48, 47, 40, 0.18);
  animation: np-travel-tour 5.8s infinite ease-in-out;
}

.np-tour-traveler::before {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--np-ink);
  box-shadow: 5px 0 var(--np-ink);
  content: "";
}

.np-tour-traveler::after {
  position: absolute;
  right: 1px;
  bottom: -3px;
  left: 1px;
  height: 4px;
  background:
    radial-gradient(circle at 2px 2px, var(--np-ink) 0 2px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 2px) 2px, var(--np-ink) 0 2px, transparent 2.2px);
  content: "";
}

.np-tour-home {
  position: absolute;
  z-index: 4;
  top: 57px;
  left: calc(50% - 119px);
  color: color-mix(in srgb, var(--np-ink) 58%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.47rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes np-tour-route {
  0%, 16% {
    background: var(--np-coral-deep);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--np-coral) 13%, transparent);
    opacity: 1;
  }
  23%, 100% {
    background: var(--np-green-deep);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--np-green) 8%, transparent);
    opacity: 0.7;
  }
}

@keyframes np-travel-tour {
  0%, 7% { transform: translate(0, 0) rotate(-14deg); }
  16%, 22% { transform: translate(78px, -20px) rotate(10deg); }
  32%, 38% { transform: translate(187px, 0) rotate(66deg); }
  48%, 54% { transform: translate(212px, 57px) rotate(152deg); }
  64%, 70% { transform: translate(142px, 95px) rotate(-175deg); }
  80%, 86% { transform: translate(26px, 85px) rotate(-107deg); }
  96%, 100% { transform: translate(0, 0) rotate(-14deg); }
}

/* Partition */

.np-scale {
  position: absolute;
  z-index: 1;
  top: 52px;
  left: 50%;
  width: 254px;
  height: 104px;
  transform: translateX(-50%);
}

.np-scale-motion {
  position: absolute;
  inset: 0;
  transform-origin: 50% 27.5px;
  animation: np-balance-wobble 6.2s infinite ease-in-out;
}

.np-scale-beam {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 17px;
  width: 220px;
  height: 5px;
  border: 1px solid var(--np-yellow-deep);
  border-radius: 999px;
  background: var(--np-yellow);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--np-yellow-deep) 35%, transparent);
  transform-origin: 50% 50%;
}

.np-scale-beam::after {
  position: absolute;
  top: -5px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--np-yellow-deep);
  border-radius: 50%;
  background: var(--np-paper);
  content: "";
}

.np-scale-cord {
  position: absolute;
  top: 4px;
  width: 1px;
  height: 46px;
  background: color-mix(in srgb, var(--np-line) 68%, transparent);
}

.cord-left { left: 30px; }
.cord-right { right: 30px; }

.np-scale-pan {
  position: absolute;
  top: 47px;
  width: 78px;
  height: 18px;
  border-bottom: 2px solid var(--np-blue-deep);
  border-radius: 0 0 44px 44px;
  background: color-mix(in srgb, var(--np-blue) 18%, transparent);
  box-shadow: 0 3px 8px rgba(48, 47, 40, 0.06);
}

.pan-left { left: -9px; }
.pan-right { right: -9px; }

.np-scale-post {
  position: absolute;
  z-index: 1;
  top: 29px;
  left: calc(50% - 3px);
  width: 6px;
  height: 63px;
  border: 1px solid var(--np-yellow-deep);
  background: var(--np-yellow);
}

.np-scale-post::before {
  position: absolute;
  top: -3px;
  left: -10px;
  width: 24px;
  height: 12px;
  border: 1.5px solid var(--np-yellow-deep);
  background: var(--np-paper);
  content: "";
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.np-scale-base {
  position: absolute;
  bottom: 7px;
  left: calc(50% - 38px);
  width: 76px;
  height: 8px;
  border: 1px solid var(--np-yellow-deep);
  border-radius: 50% 50% 7px 7px;
  background: var(--np-yellow);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--np-yellow-deep) 22%, transparent);
}

.np-weight {
  position: absolute;
  z-index: 4;
  top: 13px;
  display: grid;
  width: 28px;
  height: 26px;
  place-items: center;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 7px;
  background: var(--np-coral);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--np-coral-deep) 35%, transparent);
  color: var(--np-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 750;
  animation: np-place-weight 6.2s infinite cubic-bezier(0.55, 0, 0.3, 1);
}

.np-scale-motion .np-weight {
  top: -39px;
}

.np-weight::before {
  position: absolute;
  top: 3px;
  width: 10px;
  height: 3px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  content: "";
  opacity: 0.42;
}

.weight-one {
  left: calc(50% - 92px);
  --weight-x: -22px;
  --weight-mid-x: -12px;
  --weight-y: 97px;
}

.weight-four {
  left: calc(50% - 55px);
  --weight-x: -28px;
  --weight-mid-x: -15px;
  --weight-y: 97px;
  border-color: var(--np-yellow-deep);
  background: var(--np-yellow);
}

.weight-two {
  left: calc(50% + 17px);
  --weight-x: 29px;
  --weight-mid-x: 16px;
  --weight-y: 97px;
  border-color: var(--np-blue-deep);
  background: var(--np-blue);
}

.weight-three {
  left: calc(50% + 54px);
  --weight-x: 23px;
  --weight-mid-x: 13px;
  --weight-y: 97px;
  border-color: var(--np-green-deep);
  background: var(--np-green);
}

.np-partition-sum {
  position: absolute;
  z-index: 5;
  bottom: 7px;
  color: var(--np-green-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 700;
  opacity: 0;
  animation: np-show-sum 6.2s infinite ease-in-out;
}

.sum-left { left: calc(50% - 102px); }
.sum-right { right: calc(50% - 102px); }

@keyframes np-place-weight {
  0%, 13% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  23% {
    transform: translate(var(--weight-mid-x), -7px) rotate(-4deg);
  }
  38%, 82% {
    opacity: 1;
    transform: translate(var(--weight-x), var(--weight-y)) rotate(0);
  }
  90% {
    opacity: 0;
    transform: translate(var(--weight-x), var(--weight-y)) rotate(0);
  }
  91% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes np-balance-wobble {
  0%, 38% { transform: rotate(0); }
  44% { transform: rotate(-3deg); }
  50% { transform: rotate(2.2deg); }
  56% { transform: rotate(-1.2deg); }
  62% { transform: rotate(0.5deg); }
  68%, 100% { transform: rotate(0); }
}

@keyframes np-show-sum {
  0%, 49%, 91%, 100% {
    opacity: 0;
    transform: translateY(3px);
  }
  58%, 84% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Set cover */

.np-cover-set {
  position: absolute;
  z-index: 1;
  top: 22px;
  width: 138px;
  height: 126px;
  border: 2px solid var(--np-green-deep);
  border-radius: 48% 42% 46% 39%;
  background: color-mix(in srgb, var(--np-green) 11%, transparent);
  opacity: 0.18;
}

.np-cover-set > i {
  position: absolute;
  top: 8px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--np-paper);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 750;
}

.cover-set-a {
  left: calc(50% - 119px);
  color: var(--np-green-deep);
  transform: rotate(-3deg);
  animation: np-select-set-a 6s infinite ease-in-out;
}

.cover-set-a > i { left: 10px; }

.cover-set-b {
  left: calc(50% - 19px);
  border-color: var(--np-blue-deep);
  border-radius: 42% 49% 38% 48%;
  background: color-mix(in srgb, var(--np-blue) 11%, transparent);
  color: var(--np-blue-deep);
  transform: rotate(3deg);
  animation: np-select-set-b 6s infinite ease-in-out;
}

.cover-set-b > i { right: 10px; }

.np-cover-dot {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1.5px solid var(--np-coral-deep);
  border-radius: 50%;
  background: var(--np-paper);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--np-coral-deep) 28%, transparent),
    0 4px 10px rgba(48, 47, 40, 0.07);
  color: var(--np-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.56rem;
  font-weight: 750;
}

.np-cover-dot::after {
  position: absolute;
  right: -1px;
  bottom: -3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--np-green-deep);
  border-bottom: 2px solid var(--np-green-deep);
  content: "";
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
}

.cover-dot-1 { top: 39px; left: calc(50% - 82px); }
.cover-dot-2 { top: 82px; left: calc(50% - 66px); }
.cover-dot-3 { top: 31px; left: calc(50% - 17px); }
.cover-dot-4 { top: 112px; left: calc(50% - 7px); }
.cover-dot-5 { top: 68px; left: calc(50% + 43px); }
.cover-dot-6 { top: 110px; left: calc(50% + 86px); }

.cover-from-a {
  animation: np-cover-from-a 6s infinite ease-in-out;
}

.cover-from-a::after {
  animation: np-cover-check-a 6s infinite ease-out;
}

.cover-overlap {
  animation: np-cover-overlap 6s infinite ease-in-out;
}

.cover-overlap::after {
  animation: np-cover-check-a 6s infinite ease-out;
}

.cover-from-b {
  animation: np-cover-from-b 6s infinite ease-in-out;
}

.cover-from-b::after {
  border-color: var(--np-blue-deep);
  animation: np-cover-check-b 6s infinite ease-out;
}

.np-cover-budget {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--np-ink) 17%, transparent);
  border-radius: 999px;
  background: var(--np-paper);
  color: color-mix(in srgb, var(--np-ink) 68%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.5rem;
  font-style: normal;
  transform: translateX(-50%);
}

.np-cover-budget > i {
  flex: 0 0 16px;
  width: 16px;
  height: 6px;
  background:
    radial-gradient(circle at 3px 3px, var(--np-green) 0 2.5px, transparent 2.7px),
    radial-gradient(circle at 13px 3px, var(--np-blue) 0 2.5px, transparent 2.7px);
}

.np-cover-budget > em {
  font-style: italic;
}

@keyframes np-select-set-a {
  0%, 12%, 96%, 100% {
    opacity: 0.18;
  }
  20%, 88% {
    opacity: 0.72;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-green) 7%, transparent);
  }
}

@keyframes np-select-set-b {
  0%, 46%, 96%, 100% {
    opacity: 0.18;
  }
  55%, 88% {
    opacity: 0.72;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--np-blue) 7%, transparent);
  }
}

@keyframes np-cover-from-a {
  0%, 15%, 95%, 100% {
    border-color: var(--np-coral-deep);
    background: var(--np-paper);
    transform: scale(1);
  }
  23%, 88% {
    border-color: var(--np-green-deep);
    background: color-mix(in srgb, var(--np-green) 14%, var(--np-paper));
    transform: scale(1.06);
  }
}

@keyframes np-cover-from-b {
  0%, 50%, 95%, 100% {
    border-color: var(--np-coral-deep);
    background: var(--np-paper);
    transform: scale(1);
  }
  58%, 88% {
    border-color: var(--np-blue-deep);
    background: color-mix(in srgb, var(--np-blue) 14%, var(--np-paper));
    transform: scale(1.06);
  }
}

@keyframes np-cover-overlap {
  0%, 15%, 95%, 100% {
    border-color: var(--np-coral-deep);
    background: var(--np-paper);
    transform: scale(1);
  }
  23%, 50% {
    border-color: var(--np-green-deep);
    background: color-mix(in srgb, var(--np-green) 14%, var(--np-paper));
    transform: scale(1.06);
  }
  58%, 88% {
    border-color: var(--np-blue-deep);
    background: color-mix(in srgb, var(--np-blue) 14%, var(--np-paper));
    transform: scale(1.06);
  }
}

@keyframes np-cover-check-a {
  0%, 18%, 94%, 100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
  }
  26%, 88% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

@keyframes np-cover-check-b {
  0%, 53%, 94%, 100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.6);
  }
  61%, 88% {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
}

:root[data-theme="dark"] .np-problems {
  --np-ink: #d9dcd4;
  --np-line: #a5aaa0;
  --np-coral: #bf6e60;
  --np-coral-deep: #e49b8e;
  --np-blue: #5f81aa;
  --np-blue-deep: #a4c3e9;
  --np-yellow: #a98e48;
  --np-yellow-deep: #ead18b;
  --np-green: #648c6d;
  --np-green-deep: #abd1b2;
  --np-paper: #1d1f1c;
  --np-grid: rgba(225, 229, 219, 0.055);
}

:root[data-theme="dark"] .np-problem-card {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 10px 28px rgba(0, 0, 0, 0.13);
}

@media (max-width: 860px) {
  .np-problems {
    grid-template-columns: 1fr;
    width: min(360px, calc(100vw - 2rem));
    gap: 0.8rem;
  }

  .np-problem-stage {
    height: 174px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .np-problem-card,
  .np-problem-tooltip {
    transition-duration: 0.01ms;
  }

  .np-graph-node,
  .np-box,
  .np-sudoku-board .is-solved,
  .np-sudoku-cursor,
  .np-tour-route,
  .np-tour-traveler,
  .np-scale-motion,
  .np-weight,
  .np-partition-sum,
  .np-cover-set,
  .np-cover-dot,
  .np-cover-dot::after {
    animation: none;
  }

  .np-sudoku-board .is-solved {
    opacity: 1;
    transform: none;
  }

  .np-box {
    opacity: 1;
    transform: translate(var(--pack-x), var(--pack-y));
  }

  .np-weight {
    opacity: 1;
    transform: translate(var(--weight-x), var(--weight-y));
  }

  .np-partition-sum,
  .np-cover-dot::after {
    opacity: 1;
  }

  .np-cover-set {
    opacity: 0.72;
  }

  .np-cover-dot {
    border-color: var(--np-green-deep);
    background: color-mix(in srgb, var(--np-green) 14%, var(--np-paper));
  }
}