:root { color-scheme: dark; background: #050505; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
main { width: 100%; height: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
figure { margin: 0; width: min(1536px, 100vw, 150svh); aspect-ratio: 3 / 2; flex-shrink: 0; animation: float 14s ease-in-out infinite; will-change: transform; }
img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; mask-image: radial-gradient(ellipse at center, #000 42%, transparent 73%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@keyframes float { 0%, 100% { transform: translateY(9px) rotate(-.5deg); } 50% { transform: translateY(-9px) rotate(.5deg); } }
@media (max-width: 600px) { figure { width: min(155vw, 135svh); } }
@media (prefers-reduced-motion: reduce) { figure { animation: none; will-change: auto; } }