.problem-ir {
  --ir-ink: #3f433e;
  --ir-line: #7a8078;
  --ir-coral: #ee907c;
  --ir-coral-deep: #a94f42;
  --ir-blue: #82a9d8;
  --ir-blue-deep: #426d9d;
  --ir-yellow: #e9c96f;
  --ir-yellow-deep: #95731c;
  --ir-green: #91b99a;
  --ir-green-deep: #4c7858;
  --ir-purple: #aa96d8;
  --ir-purple-deep: #66508f;
  --ir-paper: #fbfaf5;
  --ir-grid: rgba(63, 67, 62, 0.075);
  --ir-ease: cubic-bezier(0.22, 1, 0.36, 1);
  width: min(960px, calc(100vw - 2rem));
  margin: 2.2rem 0 2.35rem 50%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ir-ink) 17%, transparent);
  border-radius: 0.9rem;
  background: var(--ir-paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 12px 32px rgba(48, 47, 40, 0.055);
  color: var(--ir-ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transform: translateX(-50%);
}

.problem-ir *,
.problem-ir *::before,
.problem-ir *::after {
  box-sizing: border-box;
}

.problem-ir__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 1.15rem 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ir-ink) 13%, transparent);
}

.problem-ir h3 {
  margin: 0;
  color: var(--ir-ink);
  font-family: inherit;
  font-size: clamp(1rem, 2.1vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.problem-ir__phase {
  position: relative;
  flex: 0 0 9.8rem;
  height: 2rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ir-ink) 15%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ir-coral) 10%, var(--ir-paper));
  color: var(--ir-coral-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  transition:
    border-color 700ms var(--ir-ease),
    background-color 700ms var(--ir-ease),
    color 700ms var(--ir-ease);
}

.problem-ir.is-shared .problem-ir__phase {
  border-color: color-mix(in srgb, var(--ir-green-deep) 30%, transparent);
  background: color-mix(in srgb, var(--ir-green) 15%, var(--ir-paper));
  color: var(--ir-green-deep);
}

.problem-ir__phase span,
.problem-ir__status span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition:
    opacity 480ms ease,
    transform 700ms var(--ir-ease);
}

.problem-ir__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
  background:
    radial-gradient(circle, var(--ir-grid) 1px, transparent 1px) 8px 8px / 16px 16px,
    color-mix(in srgb, var(--ir-paper) 95%, var(--ir-blue));
}

.problem-ir__panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ir-ink) 14%, transparent);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--ir-paper) 98%, transparent);
  box-shadow: 0 6px 20px rgba(48, 47, 40, 0.04);
}

.problem-ir__panel-header {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ir-ink) 12%, transparent);
}

.problem-ir__panel-title {
  min-width: 0;
}

.problem-ir__panel-kicker {
  display: block;
  margin-bottom: 0.04rem;
  color: color-mix(in srgb, var(--ir-ink) 48%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.problem-ir__panel h4 {
  margin: 0;
  color: var(--ir-ink);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.problem-ir__status {
  position: relative;
  width: 7.25rem;
  height: 1.45rem;
  margin-left: auto;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ir-ink) 5%, transparent);
  color: color-mix(in srgb, var(--ir-ink) 62%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.52rem;
  font-weight: 650;
}

.problem-ir__stage {
  position: relative;
  aspect-ratio: 420 / 330;
  overflow: hidden;
}

.problem-ir__stage::after {
  position: absolute;
  right: -15%;
  bottom: -25%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ir-blue) 8%, transparent);
  content: "";
  pointer-events: none;
}

.problem-ir__column-label {
  position: absolute;
  z-index: 4;
  top: 3.2%;
  color: color-mix(in srgb, var(--ir-ink) 48%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.42rem, 1.15vw, 0.54rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
}

.problem-ir__column-label--left {
  left: 2.9%;
  width: 25.25%;
}

.problem-ir__column-label--middle {
  left: 40.5%;
  width: 19%;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 420ms ease,
    transform 700ms var(--ir-ease);
}

.problem-ir__column-label--right {
  right: 3.6%;
  width: 25.25%;
}

.problem-ir.is-shared .problem-ir__column-label--middle {
  opacity: 1;
  transform: translateY(0);
}

.problem-ir__node {
  --node-fill: var(--ir-blue);
  --node-stroke: var(--ir-blue-deep);
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  width: 25.25%;
  min-height: 13.1%;
  padding: 0.36rem 0.36rem 0.36rem clamp(1.45rem, 3vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--node-stroke) 72%, transparent);
  border-radius: 0.52rem;
  background: color-mix(in srgb, var(--node-fill) 16%, var(--ir-paper));
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--node-stroke) 12%, transparent),
    0 5px 12px rgba(48, 47, 40, 0.045);
  color: var(--ir-ink);
  font-size: clamp(0.52rem, 1.35vw, 0.66rem);
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.problem-ir__node::before {
  position: absolute;
  top: 50%;
  left: 0.38rem;
  width: clamp(0.85rem, 2.6vw, 1.08rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--node-stroke) 68%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 42%, var(--ir-ink) 0 1px, transparent 1.3px),
    radial-gradient(circle at 66% 42%, var(--ir-ink) 0 1px, transparent 1.3px),
    var(--node-fill);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--node-stroke) 30%, transparent);
  content: "";
  transform: translateY(-50%);
}

.problem-ir__node::after {
  position: absolute;
  top: calc(50% + 0.1rem);
  left: clamp(0.66rem, 1.72vw, 0.73rem);
  z-index: 1;
  width: 0.25rem;
  height: 0.13rem;
  border-bottom: 1px solid color-mix(in srgb, var(--ir-ink) 78%, transparent);
  border-radius: 0 0 999px 999px;
  content: "";
}

.problem-ir__node:is(
  .problem-ir__node--language,
  .problem-ir__node--architecture,
  .problem-ir__node--problem,
  .problem-ir__node--solver
)::before {
  display: grid;
  place-items: center;
  background: var(--node-fill);
  color: color-mix(in srgb, var(--ir-ink) 88%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.problem-ir__node:is(
  .problem-ir__node--language,
  .problem-ir__node--architecture,
  .problem-ir__node--problem,
  .problem-ir__node--solver
)::after {
  display: none;
}

.problem-ir__node--language::before {
  border-radius: 0.25rem;
  content: "{}";
  font-size: clamp(0.38rem, 1.15vw, 0.5rem);
  letter-spacing: -0.12em;
  padding-right: 0.05rem;
}

.problem-ir__node--architecture::before {
  border-radius: 0.16rem;
  content: "01";
  font-size: clamp(0.3rem, 0.92vw, 0.4rem);
  letter-spacing: -0.08em;
}

.problem-ir__node--problem::before {
  border-radius: 50%;
  content: "?";
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-size: clamp(0.62rem, 1.8vw, 0.78rem);
  font-style: italic;
}

.problem-ir__node--solver::before {
  border-radius: 50% 50% 46% 46% / 38% 38% 62% 62%;
  content: "✓";
  font-size: clamp(0.5rem, 1.5vw, 0.66rem);
}

.problem-ir__node--source {
  left: 2.9%;
}

.problem-ir__node--target {
  right: 3.6%;
}

.problem-ir__node--middle {
  --node-fill: var(--ir-purple);
  --node-stroke: var(--ir-purple-deep);
  z-index: 5;
  left: 40.5%;
  top: 43.95%;
  display: grid;
  width: 19%;
  min-height: 16%;
  place-content: center;
  padding: 0.5rem 0.18rem 0.35rem;
  border-width: 1.5px;
  border-radius: 0.65rem;
  text-align: center;
  opacity: 0;
  transform: scale(0.55) rotate(-5deg);
  transition:
    opacity 450ms ease,
    transform 800ms var(--ir-ease),
    box-shadow 700ms var(--ir-ease);
}

.problem-ir__node--middle::before {
  top: -0.48rem;
  left: 50%;
  display: grid;
  width: 1.2rem;
  place-items: center;
  border-radius: 0.28rem;
  background: var(--node-fill);
  color: color-mix(in srgb, var(--ir-ink) 90%, transparent);
  content: "IR";
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.42rem;
  font-weight: 850;
  letter-spacing: -0.06em;
  line-height: 1;
  padding-right: 0.02rem;
  transform: translateX(-50%);
}

.problem-ir__node--middle::after {
  display: none;
}

.problem-ir__node--middle strong,
.problem-ir__node--middle small {
  display: block;
}

.problem-ir__node--middle strong {
  font-size: clamp(0.52rem, 1.4vw, 0.69rem);
  line-height: 1.05;
}

.problem-ir__node--middle small {
  margin-top: 0.16rem;
  color: color-mix(in srgb, var(--ir-ink) 58%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(0.38rem, 0.98vw, 0.46rem);
  font-weight: 600;
  line-height: 1;
}

.problem-ir.is-shared .problem-ir__node--middle {
  opacity: 1;
  transform: scale(1) rotate(0);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--node-stroke) 18%, transparent),
    0 8px 20px color-mix(in srgb, var(--node-fill) 20%, transparent);
}

.problem-ir__node--coral {
  --node-fill: var(--ir-coral);
  --node-stroke: var(--ir-coral-deep);
}

.problem-ir__node--yellow {
  --node-fill: var(--ir-yellow);
  --node-stroke: var(--ir-yellow-deep);
}

.problem-ir__node--green {
  --node-fill: var(--ir-green);
  --node-stroke: var(--ir-green-deep);
}

.problem-ir__node--blue {
  --node-fill: var(--ir-blue);
  --node-stroke: var(--ir-blue-deep);
}

.problem-ir__row-1 { top: 19.7%; }
.problem-ir__row-2 { top: 37%; }
.problem-ir__row-3 { top: 54.25%; }
.problem-ir__row-4 { top: 71.5%; }
.problem-ir__target-row-1 { top: 24.85%; }
.problem-ir__target-row-2 { top: 45.45%; }
.problem-ir__target-row-3 { top: 66.05%; }

.problem-ir__edge {
  --edge-color: var(--ir-line);
  position: absolute;
  z-index: 1;
  left: var(--edge-left);
  top: var(--edge-top);
  width: var(--edge-width);
  height: 1.5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--edge-color) 62%, transparent);
  opacity: 0.64;
  transform: rotate(var(--edge-angle)) scaleX(1);
  transform-origin: 0 50%;
  transition:
    opacity 520ms ease,
    transform 760ms var(--ir-ease);
}

.problem-ir__edge::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid color-mix(in srgb, var(--edge-color) 75%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--edge-color) 75%, transparent);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.problem-ir__edge--shared {
  --edge-color: var(--ir-green-deep);
  height: 2px;
  opacity: 0;
  transform: rotate(var(--edge-angle)) scaleX(0.08);
}

.problem-ir__edge--noop {
  height: 1.5px;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--edge-color) 70%, transparent) 0 4px,
    transparent 4px 8px
  );
}

.problem-ir.is-shared .problem-ir__edge--legacy {
  opacity: 0;
  transform: rotate(var(--edge-angle)) scaleX(0.18);
}

.problem-ir.is-shared .problem-ir__edge--shared {
  opacity: 0.84;
  transform: rotate(var(--edge-angle)) scaleX(1);
}

.problem-ir__spark {
  position: absolute;
  z-index: 6;
  width: 0.38rem;
  height: 0.38rem;
  border: 1px solid var(--ir-purple-deep);
  background: var(--ir-purple);
  opacity: 0;
  transform: rotate(45deg) scale(0);
  transition:
    opacity 260ms ease 420ms,
    transform 700ms var(--ir-ease) 380ms;
}

.problem-ir__spark--a {
  top: 38%;
  left: 38.5%;
}

.problem-ir__spark--b {
  top: 62%;
  left: 59.5%;
  width: 0.3rem;
  height: 0.3rem;
}

.problem-ir.is-shared .problem-ir__spark {
  opacity: 0.85;
  transform: rotate(45deg) scale(1);
}

.problem-ir__specialized-solver {
  transition:
    opacity 460ms ease,
    transform 720ms var(--ir-ease);
}

.problem-ir.is-shared .problem-ir__specialized-solver {
  opacity: 0;
  transform: translateX(18px) scale(0.86);
}

.problem-ir__sat-solver {
  transition:
    top 760ms var(--ir-ease),
    border-color 520ms ease,
    background-color 520ms ease,
    box-shadow 520ms ease;
}

.problem-ir.is-shared .problem-ir__sat-solver {
  --node-fill: var(--ir-green);
  --node-stroke: var(--ir-green-deep);
  top: 45.45%;
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--ir-green-deep) 14%, transparent),
    0 7px 16px color-mix(in srgb, var(--ir-green) 16%, transparent);
}

.problem-ir__phase-shared {
  opacity: 0;
  transform: translateY(70%);
}

.problem-ir.is-shared .problem-ir__phase-initial {
  opacity: 0;
  transform: translateY(-70%);
}

.problem-ir.is-shared .problem-ir__phase-shared {
  opacity: 1;
  transform: translateY(0);
}

.problem-ir figcaption {
  margin: 0;
  padding: 0.8rem 1.15rem 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--ir-ink) 12%, transparent);
  color: color-mix(in srgb, var(--ir-ink) 66%, transparent);
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}

:root[data-theme="dark"] .problem-ir {
  --ir-ink: #d9dcd4;
  --ir-line: #a5aaa0;
  --ir-coral: #bf6e60;
  --ir-coral-deep: #e49b8e;
  --ir-blue: #5f81aa;
  --ir-blue-deep: #a4c3e9;
  --ir-yellow: #a98e48;
  --ir-yellow-deep: #ead18b;
  --ir-green: #648c6d;
  --ir-green-deep: #abd1b2;
  --ir-purple: #76639f;
  --ir-purple-deep: #cab8f0;
  --ir-paper: #1d1f1c;
  --ir-grid: rgba(225, 229, 219, 0.055);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.035) inset,
    0 14px 36px rgba(0, 0, 0, 0.16);
}

@media (max-width: 760px) {
  .problem-ir {
    width: min(450px, calc(100vw - 1.5rem));
  }

  .problem-ir__header {
    align-items: start;
  }

  .problem-ir__grid {
    grid-template-columns: 1fr;
  }

  .problem-ir__phase {
    flex-basis: 8.9rem;
  }
}

@media (max-width: 390px) {
  .problem-ir__header {
    display: block;
  }

  .problem-ir__phase {
    width: 9.2rem;
    margin-top: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-ir *,
  .problem-ir *::before,
  .problem-ir *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}