:root { color-scheme: light dark; --page-background: #ffffff; --page-ink: #27242d; }
* { box-sizing: border-box; }
html { background: var(--page-background); }
body { margin: 0; color: var(--page-ink); background: var(--page-background); }
main { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 24px; }
.brand { margin: 0; width: min(84vw, 78vh, 640px); width: min(84vw, 78svh, 640px); line-height: 1; }
.scene { display: block; position: relative; width: 100%; aspect-ratio: 1; }
.scene-base { position: absolute; display: block; top: 23%; left: 0; width: 100%; height: auto; }
.sprite { position: absolute; display: block; width: var(--width); left: var(--left); top: var(--top); overflow: hidden; animation: drift var(--duration, 11s) ease-in-out var(--delay, -2s) infinite; animation-play-state: paused; transform-origin: center; }
.is-playing .sprite { animation-play-state: running; }
.arm { z-index: 2; transform-origin: 10% 85%; animation-name: wave; animation-duration: 3.8s; animation-delay: -.5s; }
@keyframes drift {
  0%, 100% { transform: translate(-3%, 3%) rotate(-2deg); }
  50% { transform: translate(var(--dx, 5%), var(--dy, -6%)) rotate(var(--turn, 3deg)); }
}
@keyframes wave {
  0%, 58%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-9deg); }
  27% { transform: rotate(5deg); }
  42% { transform: rotate(-7deg); }
}
.motion-toggle { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; color: var(--page-ink); border: 1px solid #ad9dc4; border-radius: 50%; background: var(--page-background); cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { background: #ad9dc4; color: #27242d; }
.motion-toggle:focus-visible { outline: 3px solid var(--page-ink); outline-offset: 5px; }
.motion-toggle svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
::selection { color: #27242d; background: #ffc801; }
@media (prefers-color-scheme: dark) { :root { --page-background: #27242d; --page-ink: #ffffff; } }
@media (prefers-reduced-motion: reduce) { .scene:not(.motion-opt-in) .sprite { animation: none; } }