:root {
  background: #17130e;
  color: #241c14;
  font-family: "Courier New", Courier, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #17130e;
}

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  background: #d9cfb5;
}

[data-contract-id] {
  position: absolute;
  margin: 0;
}

[data-contract-id][hidden] { display: none !important; }

[data-contract-id="opening-frame"],
[data-contract-id="payoff-frame"] {
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

[data-contract-id="receipt-mask"] {
  background:
    linear-gradient(90deg, transparent 0 7%, #eee9d9 7% 96%, transparent 96%),
    repeating-linear-gradient(0deg, #e8e2d1 0 2px, #f1ecdd 2px 5px);
  clip-path: polygon(6% 0, 94% 0, 94% 100%, 6% 100%);
}

[data-contract-id="receipt-panel"] {
  background:
    linear-gradient(90deg, #0001, transparent 9% 88%, #0002),
    repeating-linear-gradient(0deg, #f2eddc 0 3px, #e7e1d0 3px 5px);
  border: max(1px, .14cqw) solid #2d251c;
  box-shadow: .4cqw .5cqw 0 #17130e66;
  clip-path: polygon(0 2%, 4% 0, 8% 2%, 12% 0, 16% 2%, 20% 0, 24% 2%, 28% 0, 32% 2%, 36% 0, 40% 2%, 44% 0, 48% 2%, 52% 0, 56% 2%, 60% 0, 64% 2%, 68% 0, 72% 2%, 76% 0, 80% 2%, 84% 0, 88% 2%, 92% 0, 96% 2%, 100% 0, 100% 98%, 96% 100%, 92% 98%, 88% 100%, 84% 98%, 80% 100%, 76% 98%, 72% 100%, 68% 98%, 64% 100%, 60% 98%, 56% 100%, 52% 98%, 48% 100%, 44% 98%, 40% 100%, 36% 98%, 32% 100%, 28% 98%, 24% 100%, 20% 98%, 16% 100%, 12% 98%, 8% 100%, 4% 98%, 0 100%);
  animation: receipt-print var(--receipt-print-ms) steps(5, end) both;
}

[data-contract-id="receipt-total"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: .16cqw dashed #31271d;
  border-bottom: .16cqw dashed #31271d;
  color: #2b2118;
  font-size: clamp(7px, .78cqw, 15px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -.04em;
  transform: rotate(-.8deg);
}

button[data-contract-id],
a[data-contract-id] {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  color: #271a12;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

[data-contract-id="primary-action"] {
  display: grid;
  place-items: center;
  padding: .7cqw;
  border: .35cqw solid #3a3024;
  border-radius: .75cqw;
  background: #d8e0c8;
  box-shadow:
    inset .25cqw .25cqw 0 #fff9,
    inset -.28cqw -.3cqw 0 #6e6b5e,
    .4cqw .5cqw 0 #19140e99;
  font-size: clamp(12px, 1.28cqw, 25px);
  line-height: .95;
  letter-spacing: -.08em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

[data-contract-id="primary-action"][data-contract-visibility="highlighted"] {
  animation: button-throb 850ms steps(2, end) infinite;
}

[data-contract-id="primary-action"]:active:not(:disabled) {
  box-shadow: inset .25cqw .3cqw 0 #665e50;
  transform: translate(.18cqw, .2cqw) rotate(-1deg);
}

[data-contract-id="primary-action"]:disabled { cursor: wait; }

[data-contract-id="x-launch-link"],
[data-contract-id="pump-launch-link"],
[data-contract-id="copy-ca-action"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .15cqw .35cqw;
  border-top: .14cqw dashed #31271d;
  border-bottom: .14cqw dashed #31271d;
  background: transparent;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: clamp(6px, .55cqw, 11px);
  line-height: .95;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

[data-contract-id="copy-ca-action"] { appearance: none; }

[data-contract-id="copy-status"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .15cqw .35cqw;
  color: #69191a;
  font-size: clamp(7px, .62cqw, 12px);
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

[data-contract-id="mute-control"] {
  display: grid;
  place-items: center;
  padding: 0;
  border: .15cqw solid #32291f;
  background: #e8e0ca;
  box-shadow: .15cqw .18cqw 0 #17130e88;
  font-size: clamp(16px, 1.25cqw, 24px);
  filter: grayscale(1);
}

button[data-contract-id]:focus-visible,
a[data-contract-id]:focus-visible {
  outline: max(3px, .22cqw) solid #d91e2c;
  outline-offset: max(2px, .12cqw);
}

a[data-contract-id][aria-disabled="true"],
button[data-runtime-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

[data-contract-id="can-impact-effects"] { pointer-events: none; }

.impact-can,
.down-arrow,
.impact-star,
.paper-bit {
  position: absolute;
  display: block;
  opacity: 0;
}

.impact-can {
  bottom: 9%;
  width: 8.5%;
  height: 36%;
  border: .18cqw solid #241a14;
  border-radius: 46% 46% 18% 18% / 10% 10% 9% 9%;
  background: linear-gradient(90deg, #8e141b, #de2630 20% 77%, #841017);
  box-shadow: inset 0 .4cqw #cdc3a8, inset 0 -.35cqw #bcb39b, .25cqw .25cqw 0 #1116;
}

.impact-can::before,
.impact-can::after {
  content: "";
  position: absolute;
  left: -3%;
  width: 106%;
  height: 9%;
  border: .12cqw solid #241a14;
  border-radius: 50%;
  background: #bab39f;
}

.impact-can::before { top: -3%; }
.impact-can::after { bottom: -3%; }

.impact-can i {
  position: absolute;
  inset: 27% 12%;
  border: .12cqw solid #31271e;
  background: #ebe3ca;
  transform: skewY(-3deg);
}

.can-one { left: 56%; }
.can-two { left: 70%; }
.can-three { left: 84%; }

.down-arrow {
  top: -12%;
  color: #c81e29;
  font: 900 clamp(24px, 3.6cqw, 70px)/1 Arial, sans-serif;
  text-shadow: .18cqw .18cqw 0 #f2e8cf, .3cqw .3cqw 0 #211811;
  animation: arrow-drop 260ms steps(2, end) infinite;
}

.arrow-one { left: 56%; }
.arrow-two { left: 70%; }
.arrow-three { left: 84%; }

.impact-star {
  top: 22%;
  color: #f1d82d;
  font: 900 clamp(28px, 4.6cqw, 88px)/1 Arial, sans-serif;
  -webkit-text-stroke: .18cqw #d01924;
  text-shadow: .25cqw .25cqw 0 #1f1710;
}

.star-one { left: 22%; }
.star-two { left: 10%; top: 35%; }
.star-three { left: 0; top: 48%; }

[data-impact-step="1"] .can-one,
[data-impact-step="1"] .arrow-one,
[data-impact-step="1"] .star-one,
[data-impact-step="2"] .can-one,
[data-impact-step="2"] .can-two,
[data-impact-step="2"] .arrow-one,
[data-impact-step="2"] .arrow-two,
[data-impact-step="2"] .star-one,
[data-impact-step="2"] .star-two,
[data-impact-step="3"] .impact-can,
[data-impact-step="3"] .down-arrow,
[data-impact-step="3"] .impact-star { opacity: 1; }

[data-contract-state="averaging-down"] [data-contract-id="opening-frame"] {
  animation: checkout-shake 105ms steps(2, end) infinite;
}

[data-contract-state="averaging-down"] [data-contract-id="can-impact-effects"][data-flash="true"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #e2222b;
  mix-blend-mode: multiply;
  opacity: .38;
}

[data-contract-state="replay-reset"] [data-contract-id="opening-frame"] {
  animation: reset-jolt var(--receipt-tear-ms) steps(2, end) both;
}

.paper-bit {
  right: 2%;
  top: 65%;
  width: 4%;
  aspect-ratio: 1.4;
  border: .1cqw solid #392f25;
  background: #eee7d3;
}

[data-reset="true"] .paper-bit { opacity: 1; animation: paper-cough var(--receipt-tear-ms) steps(4, end) both; }
.bit-two { margin-right: 4%; animation-delay: 35ms !important; }
.bit-three { margin-right: 8%; animation-delay: 70ms !important; }
.bit-four { margin-right: 12%; animation-delay: 105ms !important; }

@keyframes receipt-print {
  from { clip-path: inset(0 0 100%); }
  to { clip-path: inset(0); }
}

@keyframes button-throb {
  50% { filter: brightness(1.12); transform: rotate(1deg) scale(1.015); }
}

@keyframes checkout-shake {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-.15cqw, .08cqw); }
  75% { transform: translate(.16cqw, -.06cqw); }
}

@keyframes arrow-drop { 50% { transform: translateY(.45cqw); } }

@keyframes reset-jolt {
  0% { transform: translateX(.6cqw); filter: contrast(1.4); }
  100% { transform: translateX(0); filter: none; }
}

@keyframes paper-cough {
  from { transform: translate(0, 0) rotate(0); }
  to { transform: translate(9cqw, -7cqw) rotate(140deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}