* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #15120f; }
.animation { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#animation { display: block; width: 100%; height: 100%; object-fit: fill; object-position: center; }
#animation-placeholder { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; background: #15120f; pointer-events: none; }
#animation-placeholder[hidden] { display: none; }
#animation-play { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 12px 24px; border: 1px solid #fff; border-radius: 6px; background: #15120f; color: #fff; font: 600 16px system-ui, sans-serif; cursor: pointer; }
#animation-play[hidden] { display: none; }
#animation-error { position: absolute; top: 16px; left: 16px; right: 16px; padding: 12px; color: #fff; background: #15120f; font: 16px system-ui, sans-serif; text-align: center; }
#animation-error[hidden] { display: none; }
#animation-play:focus-visible { outline: 3px solid #ef3026; outline-offset: 4px; }