:root {
  --off-x: 0px;
  --off-y: 0px;
  --off-rot: 0deg;
  --off-pad: 0px;
  --off-gap: 0em;
}
html.run-2 { --off-x: 4px;  --off-y: -3px; --off-rot: 0.35deg; --off-pad: 8px;  --off-gap: 0.08em; }
html.run-3 { --off-x: 11px; --off-y: -8px; --off-rot: 1.1deg;  --off-pad: 22px; --off-gap: 0.25em; }

.loop-hidden { display: none !important; }

.content, .comment, .composer, .thread-title, .score-board {
  translate: var(--off-x) var(--off-y);
  rotate: var(--off-rot);
}
.content { padding: var(--off-pad); }

.page:nth-child(even) .content,
.comment:nth-child(even) {
  translate: calc(var(--off-x) * -1.6) calc(var(--off-y) * -0.5);
  rotate: calc(var(--off-rot) * -1);
}

h1, h2, .question-prompt, .thread-title { word-spacing: var(--off-gap); }

@media (prefers-reduced-motion: no-preference) {
  html.run-3 .content,
  html.run-3 .comment { animation: loop-drift 9s ease-in-out infinite; }
}
@keyframes loop-drift {
  0%, 100% { translate: var(--off-x) var(--off-y); }
  50%      { translate: calc(var(--off-x) * 1.4) calc(var(--off-y) * 0.4); }
}