:root {
  color: #e8e6dc;
  background: #171914;
  font-family: system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #171914;
}

[data-contract-state="post-payoff"] {
  animation: tire-shake var(--timing-tire-impact) var(--timing-cough-pause) ease-out both;
}

@keyframes tire-shake {
  0%, 100% { transform: none; }
  25% { transform: translate(0.4%, -0.6%); }
  55% { transform: translate(-0.5%, 0.4%); }
  80% { transform: translate(0.2%, 0.2%); }
}

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

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

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

button[data-contract-id],
a[data-contract-id] {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.15;
}

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

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

[data-contract-visibility="highlighted"] {
  filter: brightness(1.25);
  transform: scale(1.08);
}

button[data-contract-id="hold-air"] {
  border: 3px solid #0c0d0a;
  border-radius: 10px;
  background: linear-gradient(#4a5142, #23261e);
  color: #f2d24b;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: clamp(10px, 1vw, 16px);
  box-shadow: inset 0 -0.4em 0.6em #0006, 0 2px 4px #000a;
}

button[data-contract-id="hold-air"]:active {
  transform: translateY(2%);
}

button[data-contract-id="bleed-air"] {
  border-radius: 6px;
  border: 2px solid #0c0d0a;
  background: #5c1f1f;
  color: #f2c4b8;
  font-weight: 800;
  font-size: clamp(7px, .7vw, 11px);
  letter-spacing: .06em;
}

button[data-contract-id="copy-ca"],
a[data-contract-id="x-link"],
a[data-contract-id="pump-link"] {
  border: 1px solid #4a4d40;
  border-radius: 4px;
  background: #23261e;
  color: #b9bdb0;
  font-family: ui-monospace, monospace;
  font-size: clamp(6px, .62vw, 10px);
  font-weight: 700;
  word-break: break-word;
}

button[data-contract-id="mute-control"] {
  border: 1px solid #4a4d40;
  border-radius: 8px;
  background: #2f2f2a;
  color: #cfcfc6;
  font-size: clamp(7px, .65vw, 10px);
  font-weight: 700;
}

div[data-contract-id="pressure-meter"],
div[data-contract-id="status-feedback"] {
  border: 2px solid #4a4d40;
  border-radius: 4px;
  background: #101408;
  display: grid;
  place-items: center;
  padding: 2%;
  font-family: ui-monospace, monospace;
  pointer-events: none;
}

div[data-contract-id="pressure-meter"] {
  color: #d8e6a0;
  font-weight: 800;
  font-size: clamp(11px, 1.5vw, 24px);
  letter-spacing: .04em;
  text-align: center;
}

div[data-contract-id="pressure-meter"][data-contract-visibility="highlighted"] {
  color: #ffef9a;
}

div[data-contract-id="status-feedback"] {
  color: #a8c46a;
  font-size: clamp(7px, .8vw, 12px);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
}

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

[data-contract-id="feather-effects"] i {
  position: absolute;
  left: var(--feather-left);
  top: 8%;
  width: var(--feather-size);
  height: calc(var(--feather-size) * 2.2);
  background: #f5f2e8;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  opacity: 0;
  animation: feather-fall calc(var(--timing-feather-step) * 6) linear var(--feather-delay) infinite;
}

@keyframes feather-fall {
  from { transform: translateY(-100%) rotate(0deg); opacity: 0; }
  12% { opacity: .85; }
  80% { opacity: .6; }
  to { transform: translateY(620%) rotate(220deg) translateX(var(--feather-drift)); opacity: 0; }
}

[data-contract-id="cough-impact"] {
  background: radial-gradient(closest-side, #ffffffcc, #ffffff00 72%);
  opacity: 0;
  pointer-events: none;
}

[data-contract-state="post-payoff"] [data-contract-id="cough-impact"] {
  animation: impact-flash var(--timing-tire-impact) var(--timing-cough-pause) ease-out both;
}

@keyframes impact-flash {
  0% { opacity: 0; transform: scale(.6); }
  35% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.15); }
}

[data-contract-id="stare-glint"] {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px #ffffffaa;
  opacity: 0;
  pointer-events: none;
}

[data-contract-state="post-payoff"] [data-contract-id="stare-glint"] {
  animation: glint var(--timing-forward-stare) ease-in both;
}

@keyframes glint {
  from { opacity: 0; }
  to { opacity: 1; }
}

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