.artwork h2,
.artwork p {
  margin: 0;
  font-weight: 500;
}
.artwork svg {
  display: block;
}
.corner {
  --hover-tilt: 0.8deg;
  pointer-events: auto;
}
.limits-corner,
.rewards-corner {
  --hover-tilt: -0.8deg;
}
.floating {
  translate: 0 0;
  rotate: 0deg;
  transition:
    translate 0.45s var(--ease),
    rotate 0.45s var(--ease),
    filter 0.45s var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .corner:hover .floating {
    translate: 0 -8px;
    rotate: var(--hover-tilt);
    filter: drop-shadow(0 8px 12px #22391a12);
    animation-play-state: paused;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating {
    transition: none;
  }
}
.agent-card {
  position: absolute;
  left: 14%;
  top: 25%;
  width: 82%;
  aspect-ratio: 1.59;
  border-radius: 3.2cqw;
  padding: 6cqw;
  color: #223917;
  background: linear-gradient(125deg, #ddfca4 0%, #c4ef83 45%, #aada6f 100%);
  transform: rotate(-14deg);
  box-shadow:
    0 0.8cqw 0 #81ad4e,
    0 1cqw 0 #587a36,
    0 1.2cqw 1cqw #26421630,
    0 4cqw 6cqw #233a212a,
    0 8cqw 12cqw #233a2118,
    inset 0 0 0 0.25cqw #eaffc39c;
}
.agent-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg, #ffffff28, transparent 42%, #4d70220a);
}
.card-contours {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #4f792d;
  opacity: 0.21;
  border-radius: inherit;
  overflow: hidden;
}
.card-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2cqw;
  font-size: 5.2cqw;
  letter-spacing: -0.25cqw;
  font-weight: 500;
}
.card-brand img {
  width: 5cqw;
  height: 5.2cqw;
  filter: brightness(0) opacity(0.8);
}
.chip {
  position: absolute;
  left: 6cqw;
  top: 22cqw;
  width: 14cqw;
  height: 10cqw;
}
.card-owner {
  position: absolute;
  bottom: 6cqw;
  left: 6cqw;
  display: grid;
  gap: 2cqw;
  font-size: 2.5cqw;
}
.card-number {
  letter-spacing: 0.8cqw;
  font-size: 3cqw;
}
.card-protocol {
  position: absolute;
  right: 6cqw;
  bottom: 6cqw;
  display: grid;
  gap: 0.5cqw;
  text-align: right;
}
.card-protocol strong {
  font-size: 5.3cqw;
  letter-spacing: -0.25cqw;
  font-weight: 500;
}
.card-protocol span {
  font-size: 1.3cqw;
  letter-spacing: 0.18cqw;
  color: #4d6d34;
}
.controls-object {
  position: absolute;
  left: 6%;
  top: 22%;
  width: 82%;
  transform: rotate(17deg);
}
.controls-surface {
  position: relative;
  padding: 5.5cqw;
  border-radius: 3.5cqw;
  background: linear-gradient(135deg, #ffffff, #f5f7f4);
  border: 1px solid #dfe5db;
  box-shadow:
    0 0.7cqw 0 #dde3d8,
    0 1cqw 1cqw #36432a15,
    0 4cqw 7cqw #22341e24,
    0 8cqw 12cqw #22341e14;
}
.controls-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.5cqw;
}
.controls-heading h2 {
  font-size: 3.8cqw;
  letter-spacing: -0.1cqw;
}
.controls-heading > span {
  font-size: 3.5cqw;
  letter-spacing: 0.4cqw;
  color: #8e988c;
}
.budget-label {
  display: block;
  color: #66715f;
  font-size: 2.8cqw;
  margin-bottom: 0.7cqw;
}
.artwork .budget-amount {
  font-size: 7.3cqw;
  line-height: 1.1;
  letter-spacing: -0.35cqw;
}
.budget-track {
  height: 2.5cqw;
  margin-top: 3cqw;
  border-radius: 2cqw;
  background: #e6ebdf;
  overflow: hidden;
}
.budget-track div {
  width: 64.28%;
  height: 100%;
  background: #bdf16a;
  border-radius: inherit;
}
.budget-used {
  display: block;
  text-align: right;
  font-size: 2.5cqw;
  margin: 1.5cqw 0 3cqw;
}
.budget-used span {
  color: #929b8c;
}
.control-row {
  display: flex;
  align-items: center;
  gap: 2cqw;
  min-height: 11cqw;
  font-size: 2.9cqw;
  border-top: 1px solid #e5e9e1;
}
.control-row strong {
  margin-left: auto;
  font-size: 2.7cqw;
  font-weight: 500;
}
.control-icon {
  display: grid;
  place-items: center;
  width: 7cqw;
  height: 7cqw;
  flex-shrink: 0;
  border-radius: 1.8cqw;
  color: #eaf1e3;
  background: #172011;
  box-shadow: inset 0 1px 0 #ffffff1a;
}
.control-icon svg {
  width: 4.5cqw;
  height: 4.5cqw;
}
.row-arrow {
  margin-left: auto;
  font-size: 4cqw;
  color: #7c8877;
}
.lock {
  position: absolute;
  width: 28cqw;
  height: 35cqw;
  right: -8cqw;
  bottom: -4cqw;
  overflow: visible;
  transform: rotate(-8deg);
  filter: drop-shadow(0 1cqw 1cqw #0d1d0730) drop-shadow(0 3cqw 3cqw #15250d26);
}
.rewards-object {
  position: absolute;
  left: 15%;
  top: 11%;
  width: 77%;
  height: 65cqw;
  padding: 6cqw;
  transform: rotate(17deg);
  border-radius: 3.5cqw;
  color: #f5faef;
  background: linear-gradient(130deg, #283023, #131b10 62%, #192414);
  border: 1px solid #34412b;
  box-shadow:
    0 0.7cqw 0 #2b3424,
    0 1cqw 1cqw #23321a28,
    0 4cqw 7cqw #20311a28,
    0 8cqw 12cqw #20311a14,
    inset 0 1px 0 #ffffff17;
}
.rewards-object h2 {
  font-size: 3.8cqw;
  letter-spacing: -0.1cqw;
}
.artwork .rewards-title {
  position: relative;
  z-index: 1;
  margin-top: 4cqw;
  color: #caf581;
  font-size: 5.8cqw;
  letter-spacing: -0.22cqw;
  line-height: 1.1;
  white-space: nowrap;
}
.artwork .rewards-note {
  font-size: 2.7cqw;
  color: #b4beab;
  margin-top: 2cqw;
}
.reward-bars {
  position: absolute;
  bottom: 6cqw;
  right: 6cqw;
  width: 44cqw;
  height: 26cqw;
  display: flex;
  align-items: flex-end;
  gap: 2cqw;
  transform: skewY(-7deg);
}
.reward-bars span {
  width: 5cqw;
  border-radius: 2cqw;
  background: linear-gradient(100deg, #8aad58, #c4f56c);
  box-shadow: inset -0.5cqw 0 0 #6a8b3a30;
}
.reward-bars span:nth-child(1) {
  height: 35%;
  opacity: 0.15;
}
.reward-bars span:nth-child(2) {
  height: 45%;
  opacity: 0.25;
}
.reward-bars span:nth-child(3) {
  height: 58%;
  opacity: 0.45;
}
.reward-bars span:nth-child(4) {
  height: 72%;
  opacity: 0.7;
}
.reward-bars span:nth-child(5) {
  height: 87%;
}
.reward-bars span:nth-child(6) {
  height: 100%;
}
.reward-arrow {
  position: absolute;
  bottom: 35cqw;
  right: 6cqw;
  color: #c4f56c;
  width: 7cqw;
  height: 7cqw;
  display: grid;
  place-items: center;
  font-size: 4cqw;
  background: #b3dd681c;
  border-radius: 50%;
}
.coin {
  position: absolute;
  left: 2cqw;
  bottom: -7cqw;
  width: 27cqw;
  height: 27cqw;
  overflow: visible;
  transform: rotate(-22deg) skewY(8deg);
  filter: drop-shadow(0 1cqw 1cqw #23371630) drop-shadow(0 3cqw 3cqw #23371625);
}
.payment-object {
  position: absolute;
  inset: 0;
  transform: rotate(-12deg);
}
.instant-tile {
  position: absolute;
  left: 10%;
  bottom: 12%;
  width: 37cqw;
  height: 45cqw;
  padding: 5cqw;
  border-radius: 3cqw;
  transform: rotate(-7deg);
  background: linear-gradient(130deg, #293123, #131c10);
  border: 1px solid #3c4934;
  box-shadow:
    0 0.6cqw 0 #263120,
    0 3cqw 6cqw #26361e2b;
  color: #f2f8eb;
}
.instant-tile svg {
  width: 9cqw;
  height: 9cqw;
  color: #c4f56c;
  margin-bottom: 6cqw;
}
.instant-tile span {
  font-size: 3.6cqw;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.1cqw;
}
.receipt {
  position: absolute;
  left: 33%;
  top: 7%;
  width: 59cqw;
  filter: drop-shadow(0 0.7cqw 0.8cqw #33402b18) drop-shadow(0 4cqw 5cqw #28372126);
}
.receipt-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.receipt-content {
  position: relative;
  padding: 7cqw 6cqw 6cqw;
  min-height: 78cqw;
}
.receipt h2 {
  font-size: 3.8cqw;
  letter-spacing: -0.1cqw;
}
.paid-check {
  display: grid;
  place-items: center;
  margin: 5cqw auto 4cqw;
  width: 12cqw;
  height: 12cqw;
  border-radius: 50%;
  background: #c4f56c;
  color: #263a17;
}
.paid-check svg {
  width: 6cqw;
  height: 6cqw;
}
.artwork .paid-amount {
  text-align: center;
  font-size: 6.2cqw;
  letter-spacing: -0.25cqw;
  margin-bottom: 5cqw;
  line-height: 1.1;
}
.receipt-row {
  padding: 2.5cqw 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  border-top: 1px solid #e3e8df;
  font-size: 2.6cqw;
}
.receipt-row > span {
  color: #8a9384;
}
.receipt-row strong {
  font-weight: 400;
  color: #586350;
}
.receipt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  margin-top: 5cqw;
  color: #88957c;
  font-family: monospace;
  font-size: 1.65cqw;
  letter-spacing: 0.22cqw;
  line-height: 1.6;
}
.receipt-foot img {
  width: 4.5cqw;
  height: 4.6cqw;
  filter: brightness(0) opacity(0.3);
}