.match-art {
  background:
    radial-gradient(ellipse at 55% 45%, #70865b24, transparent 70%), #202b23;
}
.match-pitch {
  position: absolute;
  width: 76%;
  height: 55%;
  left: 12%;
  top: 22%;
  border: 1px solid #b9c79b35;
  transform: perspective(700px) rotateX(15deg) rotate(-7deg);
}
.match-pitch:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #b9c79b35;
}
.pitch-center {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid #b9c79b35;
  border-radius: 50%;
  left: calc(50% - 32px);
  top: calc(50% - 32px);
}
.pitch-box {
  position: absolute;
  width: 15%;
  height: 60%;
  top: 20%;
  border: 1px solid #b9c79b35;
}
.pitch-box.left {
  left: -1px;
}
.pitch-box.right {
  right: -1px;
}
.match-pitch svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.match-pitch path {
  fill: none;
  stroke: #d2b77eaa;
  stroke-width: 1;
  stroke-dasharray: 4 5;
  stroke-dashoffset: 0;
  animation: match-path 18s linear infinite;
}
.match-pitch circle {
  fill: #ddcc9c;
  filter: drop-shadow(0 0 5px #d2b77e77);
}
.match-signal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(7deg);
  white-space: nowrap;
  font:
    italic 20px Georgia,
    serif;
  color: #d7c79d;
  background: #253125cc;
  padding: 9px 14px;
  border: 1px solid #d2b77e28;
}
@keyframes match-path {
  to {
    stroke-dashoffset: -180;
  }
}
.payroll-art {
  background:
    radial-gradient(ellipse at 50% 50%, #ab97702a, transparent 70%), #302e26;
}
.payroll-ledger {
  position: absolute;
  width: 235px;
  height: 172px;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: #d9d1bc;
  color: #434735;
  padding: 17px 21px;
  box-shadow: 7px 10px 22px #0002;
  transition: transform 0.4s;
}
.payroll-ledger {
  box-shadow:
    7px 10px 22px #0002,
    6px 6px 0 #a8aa8c;
}
.payroll-art:hover .payroll-ledger {
  transform: translate(-50%, -52%) rotate(-1deg);
}
.ledger-header {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  letter-spacing: 1.1px;
  color: #73785d;
  padding-bottom: 12px;
  border-bottom: 1px solid #7c806340;
}
.ledger-row {
  display: flex;
  gap: 15px;
  align-items: center;
  padding-top: 10px;
  font:
    italic 16px Georgia,
    serif;
}
.ledger-row i {
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(
    90deg,
    #8b8b6c66 0 2px,
    transparent 2px 5px
  );
}
.ledger-row b {
  font:
    9px Manrope,
    sans-serif;
  color: #8b8d70;
}
.ledger-result {
  color: #555f3e;
}
.ledger-result b {
  font-size: 15px;
  color: #67764a;
}
.ledger-caption {
  text-align: right;
  font:
    italic 11px Georgia,
    serif;
  color: #8b8a6b;
  padding-top: 9px;
}
@media (max-width: 800px) {
  .match-signal {
    font-size: 16px;
    padding: 8px 9px;
  }
  .payroll-ledger {
    transform: translate(-50%, -50%) rotate(-4deg) scale(0.85);
  }
}
@media (max-width: 580px) {
  .match-signal {
    font-size: 19px;
  }
  .payroll-ledger {
    transform: translate(-50%, -50%) rotate(-4deg);
  }
  .project-toolbar > .tiny-label {
    font-size: 7px;
  }
  .case-section h1 {
    overflow-wrap: anywhere;
  }
}