:root {
  color: #182016;
  background: #151611;
  font-family: Arial, Helvetica, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #151611;
}

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #8e9784;
  box-shadow: 0 0 0 1px #000, 0 18px 55px #0009;
}

[data-contract-stage]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0000 0 3px, #0002 4px 5px);
  mix-blend-mode: multiply;
  opacity: .16;
}

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

[hidden] {
  display: none !important;
}

img[data-contract-id] {
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

[data-contract-id="photo-crop-guides"] {
  border: .26vw dashed #f3f0d7;
  box-shadow: inset 0 0 0 .16vw #121812, 0 0 0 .12vw #121812;
  pointer-events: none;
}

[data-contract-id="photo-crop-guides"]::before,
[data-contract-id="photo-crop-guides"]::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  border-top: .15vw solid #f3f0d7;
}

[data-contract-id="photo-crop-guides"]::before { top: 34%; }
[data-contract-id="photo-crop-guides"]::after { top: 66%; }

[data-contract-id="flash-effect"] {
  background: #fff;
  pointer-events: none;
  animation: flash 125ms steps(2, end);
}

[data-contract-id="crt-tear-effect"] {
  background: #f2fff4aa;
  box-shadow: 0 0 18px #fff;
  pointer-events: none;
  animation: tear 125ms steps(2, end);
}

[data-contract-stage][data-contract-state="license-landed"] {
  animation: shake 180ms steps(3, end);
}

button[data-contract-id],
a[data-contract-id][role="link"],
a[data-contract-id][href] {
  min-width: 44px;
  min-height: 44px;
  border: 2px solid #1f241a;
  border-radius: 4px;
  display: grid;
  place-items: center;
  padding: .35rem .45rem;
  background: #e5d06f;
  color: #1f241a;
  font-size: clamp(10px, 1.15vw, 19px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #0004, 0 2px 0 #0007;
}

button[data-contract-id]:disabled {
  cursor: default;
  filter: grayscale(.55);
}

button[data-contract-id]:focus-visible,
a[data-contract-id]:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

a[data-contract-id][aria-disabled="true"] {
  cursor: default;
  opacity: .72;
}

[data-contract-id="primary-photo-control"] {
  font-size: clamp(15px, 2.1vw, 34px);
  background: #f2c34f;
}

[data-contract-id="mute-audio-control"] {
  padding: .15rem;
  font-size: clamp(8px, .72vw, 12px);
  background: #f3f0d7;
}

[data-contract-id="license-classification"] {
  display: grid;
  place-items: center;
  color: #151811;
  font-family: "Courier New", monospace;
  font-size: clamp(11px, 1.35vw, 21px);
  font-weight: 900;
  text-align: center;
  text-decoration: line-through;
  text-decoration-thickness: .18em;
}

[data-contract-id="rejection-stamp"] {
  display: grid;
  place-items: center;
  border: .35vw solid #8f1914;
  color: #8f1914;
  font-size: clamp(10px, 1.05vw, 18px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: rotate(-7deg);
  text-transform: uppercase;
}

[data-contract-id="x-launch-link"],
[data-contract-id="pump-launch-link"],
[data-contract-id="copy-ca-control"],
[data-contract-id="copy-status-feedback"] {
  font-size: clamp(7px, .68vw, 12px);
  overflow: hidden;
}

[data-contract-id="copy-status-feedback"] {
  display: grid;
  place-items: center;
  color: #151811;
  font-family: "Courier New", monospace;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

[data-contract-visibility="dimmed"] { opacity: .42; }
[data-contract-visibility="disabled"] { opacity: .78; }

@keyframes flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes tear {
  0% { transform: translateY(-70%); opacity: 1; }
  100% { transform: translateY(70%); opacity: 0; }
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-.5%, .25%); }
  50% { transform: translate(.45%, -.2%); }
  75% { transform: translate(-.25%, -.15%); }
}

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