.solution-animation {
  --pv-current: #2563eb;
  --pv-current-soft: #dbeafe;
  --pv-carry: #c2410c;
  --pv-carry-soft: #ffedd5;
  --pv-borrow: #7c3aed;
  --pv-borrow-soft: #ede9fe;
  --pv-result: #047857;
  --pv-result-soft: #d1fae5;
  --pv-ink: #172033;
  --pv-muted: #718096;
  width: min(820px, 100%);
  padding: 28px;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 18px 55px rgba(30, 64, 175, .12);
}

.pv-animation {
  width: 100%;
  color: var(--pv-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.pv-caption {
  display: grid;
  min-height: 84px;
  place-content: center;
  gap: 5px;
  text-align: center;
}

.pv-caption.is-single {
  min-height: 52px;
}

.pv-caption strong {
  color: #17345c;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.2;
}

.pv-caption span {
  color: var(--pv-muted);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 650;
}

.pv-workspace {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 32px 10px;
}

.pv-grid {
  --pv-cell-size: clamp(48px, 7vw, 72px);
  position: relative;
  display: grid;
  width: max-content;
  grid-template-columns: repeat(var(--pv-columns), var(--pv-cell-size));
  margin: 0 auto;
  isolation: isolate;
}

.pv-row {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(var(--pv-columns), var(--pv-cell-size));
  align-items: center;
  text-align: center;
}

.pv-carry-row,
.pv-borrow-row {
  min-height: 46px;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 850;
}

.pv-top-row,
.pv-bottom-row,
.pv-result-row {
  min-height: 74px;
  font-size: clamp(44px, 7vw, 72px);
  line-height: 1;
}

.pv-bottom-row::before {
  position: absolute;
  left: -30px;
  color: #4b5563;
  font-size: .62em;
  font-weight: 500;
}

.pv-addition .pv-bottom-row::before { content: "+"; }
.pv-subtraction .pv-bottom-row::before { content: "−"; }
.pv-subtraction.is-negative.is-final .pv-result-row::before {
  position: absolute;
  left: -.48em;
  color: var(--pv-result);
  content: "−";
  font-weight: 850;
}

.pv-cell {
  display: grid;
  min-width: 0;
  min-height: 1.05em;
  place-items: center;
  border-radius: 10px;
  transition:
    color .28s ease,
    background-color .28s ease,
    opacity .28s ease,
    transform .28s ease,
    box-shadow .28s ease;
}

.pv-cell.is-dimmed {
  color: #64748b;
  opacity: .34;
}

.pv-cell.is-current {
  color: #1747a6;
  background: var(--pv-current-soft);
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .18);
}

.pv-cell.is-borrow-source {
  color: #5b21b6;
  background: var(--pv-borrow-soft);
  box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .2);
}

.pv-cell.is-comma {
  min-width: 0;
  padding-bottom: .06em;
  font-weight: 900;
}

.pv-cell.is-padding {
  opacity: 0;
  transform: scale(.84);
}

.pv-cell.is-padding.is-revealed {
  color: #475569;
  opacity: 1;
  transform: scale(1);
  animation: pv-zero-reveal .55s ease both;
}

.pv-decimal-axis {
  z-index: -1;
  grid-row: 2 / 5;
  align-self: stretch;
  justify-self: center;
  border-left: 2px dashed rgba(37, 99, 235, .32);
  animation: pv-axis-in .55s ease both;
  pointer-events: none;
}

.pv-subtraction .pv-decimal-axis {
  grid-row: 1 / -1;
}

.pv-rule {
  height: 4px;
  grid-column: 1 / -1;
  margin: 5px 0 9px;
  border-radius: 999px;
  background: #273449;
}

.pv-result-row .pv-cell {
  color: var(--pv-result);
  font-weight: 850;
  opacity: 0;
  transform: translateY(-10px) scale(.9);
}

.pv-result-row .pv-cell.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pv-result-row .pv-cell.is-arriving {
  background: var(--pv-result-soft);
  animation: pv-result-arrive .5s ease both;
}

.pv-carry-fixed {
  color: var(--pv-carry);
  opacity: 0;
  transform: translateY(7px);
}

.pv-carry-fixed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pv-connection-row {
  min-height: 0;
}

.pv-connection-row.has-connection {
  min-height: 42px;
}

.pv-borrow-connection {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pv-borrow);
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 800;
  line-height: 1.15;
  animation: pv-note-in .22s ease both;
}

.pv-borrow-connection b {
  font-weight: 800;
}

.pv-borrow-connection i {
  color: var(--pv-borrow);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -.12em;
}

.pv-explanation {
  display: grid;
  min-height: 56px;
  place-content: center;
  margin-top: 10px;
  text-align: center;
}

.pv-explanation strong {
  color: #17345c;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.25;
  animation: pv-note-in .22s ease both;
}

.pv-borrow-notes {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.pv-borrow-note {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  padding: 2px 5px;
  border-radius: 8px;
  font-size: .72em;
  line-height: 1;
  animation: pv-note-in .4s ease both;
}

.pv-note-borrow {
  color: var(--pv-borrow);
  background: var(--pv-borrow-soft);
}

.pv-note-transformed {
  color: var(--pv-result);
  background: var(--pv-result-soft);
}

.pv-carry-flight,
.pv-borrow-flight {
  z-index: 4;
  display: flex;
  width: var(--pv-cell-size);
  grid-row: 5;
  align-items: center;
  justify-self: center;
  gap: 4px;
  color: var(--pv-carry);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 900;
  pointer-events: none;
}

.pv-carry-flight {
  animation: pv-carry-travel 1.2s cubic-bezier(.22, .75, .22, 1) both;
}

.pv-borrow-flight {
  grid-row: 2;
  color: var(--pv-borrow);
  animation: pv-borrow-travel 1.3s cubic-bezier(.22, .75, .22, 1) both;
}

.pv-borrow-flight b {
  display: grid;
  min-width: 32px;
  min-height: 32px;
  place-items: center;
  border-radius: 9px;
  background: var(--pv-borrow-soft);
  font-size: .72em;
}

.pv-action-panel {
  display: grid;
  min-height: 96px;
  place-items: center;
  margin-top: 8px;
}

.pv-equation {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.4vw, 14px);
  animation: pv-panel-in .38s ease both;
}

.pv-equation i {
  color: #64748b;
  font-size: clamp(24px, 3.2vw, 34px);
  font-style: normal;
  font-weight: 700;
}

.pv-equation-negative > span {
  color: #475569;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
}

.pv-token {
  display: inline-grid;
  min-width: 52px;
  min-height: 52px;
  place-items: center;
  padding: 4px 10px;
  border-radius: 13px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.pv-token-current {
  color: #1747a6;
  background: var(--pv-current-soft);
}

.pv-token-sum {
  color: #334155;
  background: #eef2f7;
}

.pv-token-carry {
  color: var(--pv-carry);
  background: var(--pv-carry-soft);
}

.pv-token-result,
.pv-token-transformed {
  color: var(--pv-result);
  background: var(--pv-result-soft);
}

.pv-token-borrow {
  color: var(--pv-borrow);
  background: var(--pv-borrow-soft);
}

.pv-token-warning {
  color: #b91c1c;
  background: #fee2e2;
}

.pv-equation-label {
  max-width: 105px;
  color: #64748b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
}

.pv-phase-split-sum .pv-token-carry {
  animation: pv-split-up .55s ease both;
}

.pv-phase-split-sum .pv-token-result {
  animation: pv-split-down .55s ease both;
}

.pv-animation.is-final .pv-cell {
  color: var(--pv-ink);
  opacity: 1;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.pv-animation.is-final .pv-result-row .pv-cell {
  color: var(--pv-result);
  background: var(--pv-result-soft);
}

@keyframes pv-zero-reveal {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pv-axis-in {
  from { opacity: 0; transform: scaleY(.25); }
  to { opacity: 1; transform: scaleY(1); }
}

@keyframes pv-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pv-result-arrive {
  0% { opacity: 0; transform: translateY(-12px) scale(.86); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pv-note-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pv-split-up {
  from { opacity: .45; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(-5px); }
}

@keyframes pv-split-down {
  from { opacity: .45; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(5px); }
}

@keyframes pv-carry-travel {
  0% { opacity: 0; transform: translate(0, 0) scale(.85); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--pv-shift-x), -4.8em) scale(1); }
}

@keyframes pv-borrow-travel {
  0% { opacity: 0; transform: translate(0, 0) scale(.84); }
  18% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--pv-shift-x), 1.45em) scale(1); }
}

@media (max-width: 600px) {
  .solution-animation { padding: 18px 10px; }
  .pv-workspace { padding-inline: 24px; }
  .pv-grid { --pv-cell-size: clamp(40px, 12vw, 58px); }
  .pv-carry-row, .pv-borrow-row { min-height: 36px; }
  .pv-top-row, .pv-bottom-row, .pv-result-row { min-height: 60px; }
  .pv-action-panel { min-height: 82px; }
  .pv-equation { flex-wrap: wrap; min-height: 62px; }
  .pv-equation-label { max-width: 76px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-animation *,
  .pv-animation *::before,
  .pv-animation *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .pv-carry-flight,
  .pv-borrow-flight {
    transform: translate(var(--pv-shift-x), 0);
  }
}