@font-face {
    font-family: "ABC Monument Grotesk";
    src: url("fonts/monument-grotesk/ABCMonumentGrotesk-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
:root { color-scheme: dark; background: #000; color: #fff; font-family: "ABC Monument Grotesk", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; isolation: isolate; }
main { position: relative; z-index: 3; overflow: clip; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vh, 3rem); padding: 2rem 1rem; }
h1 { margin: 0; max-width: 100%; font-size: clamp(.75rem, 3.6vw, 4.5rem); font-weight: 400; line-height: 1.3; text-align: center; overflow-wrap: anywhere; white-space: pre-wrap; }
a { display: block; line-height: 0; }
a:focus-visible { outline: 3px solid #fff; outline-offset: 12px; }
img { display: block; height: auto; }
.brand { width: clamp(220px, 28vw, 480px); max-width: 100%; aspect-ratio: 5 / 1; }
.brand, h1 { position: relative; z-index: 1; }
.qr-link { position: relative; isolation: isolate; z-index: 0; }
/* Keep the QR and its quiet zone opaque; blend the surrounding black into the stars over 100px. */
.qr-link::before {
    content: "";
    position: absolute;
    inset: -100px;
    z-index: 0;
    pointer-events: none;
    background: #000;
    mask-image: linear-gradient(to right, transparent, #000 100px, #000 calc(100% - 100px), transparent),
                linear-gradient(to bottom, transparent, #000 100px, #000 calc(100% - 100px), transparent);
    mask-composite: intersect;
}
.qr-code { position: relative; z-index: 1; width: min(32vw, 46vh, 28rem); min-width: 180px; background: #000; }
@media (max-width: 600px) { .qr-code { width: min(70vw, 46vh); } }

/* The board presentation's original "The Future" star animation, behind the screen content. */
.wallboard-starfield { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wallboard-star { position: absolute; width: var(--star-size); height: var(--star-size); border-radius: 50%; background: #fff; opacity: var(--star-opacity); animation: wallboard-star-drift var(--star-duration) linear var(--star-delay) infinite; }
.wallboard-starfield.is-paused .wallboard-star { animation-play-state: paused; }
@keyframes wallboard-star-drift {
    0% { transform: translate(200px, -140px); opacity: 0; }
    10%, 90% { opacity: var(--star-opacity); }
    100% { transform: translate(-200px, 140px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wallboard-star { animation: none; } }
@media print { .wallboard-star { animation: none; } }

/* Back to front: stars (0), shots (1), sprites (2), content and QR fade (3). */
.wallboard-invader-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.wallboard-shot-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.wallboard-invader, .wallboard-ship { position: absolute; top: 0; left: 0; fill: #fff; shape-rendering: crispEdges; }
.wallboard-shot, .wallboard-spark { position: absolute; top: 0; left: 0; background: #fff; }
.wallboard-shot { width: 3px; height: 16px; margin-left: -1.5px; transform-origin: 50% 0; }
.wallboard-invader-frame { animation: wallboard-invader-frame .9s steps(1, end) infinite; }
.wallboard-invader-frame:nth-child(2) { animation-delay: -.45s; }
@keyframes wallboard-invader-frame {
    0%, 49.99% { visibility: visible; }
    50%, 100% { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .wallboard-invader-layer, .wallboard-shot-layer { display: none; } }
@media print { .wallboard-invader-layer, .wallboard-shot-layer { display: none; } }