@font-face { font-family: "3x3 Mono"; src: url("3X3Mono-drx1V.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
:root { color-scheme: light; font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif; color: #292929; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100svh; margin-inline: auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.builder { position: relative; width: min(100%, 440px, 60svh); margin: 0; }
video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.message { font-family: "3x3 Mono", monospace; margin: 20px 0 0; font-size: clamp(14px, 4.5vw, 22px); line-height: 1.5; font-weight: 400; }
.dots { display: inline-block; width: 3ch; text-align: left; }
.dots::after { content: ''; animation: dots 2.4s infinite; }
@keyframes dots { 0%, 24.99% { content: ''; } 25%, 49.99% { content: '.'; } 50%, 74.99% { content: '..'; } 75%, 100% { content: '...'; } }
[data-paused] .dots::after { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .dots::after { animation: none; content: ''; } }