[data-portrait-safe="true"] {
  --runtime-safe: 52svh;
  --runtime-focus: center 22%;
  background-image: var(--runtime-portrait);
  background-position: var(--runtime-focus);
  background-size: auto calc(var(--runtime-safe) + 8svh);
  background-repeat: no-repeat;
}

.runtime-beat {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.runtime-beat.runtime-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 360ms ease, transform 360ms ease;
}

.runtime-static {
  opacity: 0.72;
}

.runtime-choices {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.runtime-choice {
  margin-top: 0;
}

.runtime-choice .consequence {
  display: block;
  margin-top: 7px;
  color: var(--cyan, #8ee8ef);
  opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
  .runtime-beat,
  .runtime-beat.runtime-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}