@font-face{font-family:Mono;src:url(fonts/jetbrains-mono-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:block}
html,body{height:100%;margin:0;background:#0A0A0A;color:#e6e6e6;color-scheme:dark}
body{display:grid;place-items:center;overflow:hidden;font:300 clamp(17px,2.6vw,32px)/1 Mono,ui-monospace,monospace}
/* film grain and a slow vignette over the black, the projector before the reel starts */
body::before{content:"";position:fixed;inset:-50%;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 40%,rgba(0,0,0,.85) 100%)}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(1%,3%)}}
h1{position:relative;z-index:1;margin:0;font:inherit;letter-spacing:.38em;padding-left:.38em;white-space:nowrap;animation:flicker 7s infinite}
@keyframes flicker{0%,100%{opacity:1}91%{opacity:1}92%{opacity:.55}93%{opacity:1}96%{opacity:.8}97%{opacity:1}}
h1 i{display:inline-block;width:.62em;height:1.05em;background:#fff;vertical-align:-.18em;margin-left:.1em;animation:blink 1.06s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){body::before,h1,h1 i{animation:none}}