:root {
  color-scheme: dark;
  --midnight: #142431;
  --mint: #bdefd3;
  --coral: #ff8a6b;
  --quiet: #91b7a7;
}
* { box-sizing: border-box; }
html { background: var(--midnight); }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100svh;
  background: var(--midnight);
  color: var(--mint);
  font-family: ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
main {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 48px clamp(20px, 6vw, 110px) 100px;
}
h1 { width: min(100%, 1240px); margin: 0; font-size: inherit; line-height: 0; }
.brand { display: block; width: 100%; height: auto; overflow: visible; }
.creature-motion { transform-box: fill-box; transform-origin: 48% 90%; }
.arms-motion { transform-box: fill-box; transform-origin: 18% 36%; }
.eyes-motion { transform-box: fill-box; transform-origin: center; }
.dot-motion { transform-box: fill-box; transform-origin: center; }
.word-letter { transform-box: fill-box; transform-origin: center; }
.controls {
  position: fixed;
  bottom: max(28px, env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
.replay {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  color: var(--quiet);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.replay[hidden] { display: none; }
.replay svg { width: 16px; height: 16px; }
.replay:hover { color: var(--mint); border-color: #3f5d5a; }
.replay:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }
.replay[aria-disabled="true"] { cursor: default; }
@media (max-width: 600px) {
  main { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .replay { display: none; }
}