@font-face { font-family: "SG"; src: url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); font-weight: 500; }
@font-face { font-family: "JB"; src: url(../fonts/jetbrains-mono-latin-300-normal.woff2) format("woff2"); font-weight: 300; }
:root { --dim: rgba(236,236,248,.55); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: #f0f0f8; font-family: "SG", "PingFang SC", sans-serif; user-select: none; }
canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
canvas#gl:active { cursor: grabbing; }
#loader { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-content: center; transition: opacity 1s; font: 300 10px "JB"; letter-spacing: .3em; color: var(--dim); }
#loader.done { opacity: 0; pointer-events: none; }
.hud { position: fixed; z-index: 10; font: 300 10.5px "JB", monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); pointer-events: none; }
#tl { top: 24px; left: 28px; } #tl a { color: inherit; text-decoration: none; pointer-events: auto; }
#tl a:hover { color: #fff; }
#bl { bottom: 26px; left: 28px; }
#bl h1 { font: 500 30px "SG", "PingFang SC"; letter-spacing: .02em; text-transform: none; color: #f4f4fa; margin-bottom: 8px; }
#br { bottom: 26px; right: 28px; text-align: right; line-height: 1.9; }
@media (max-width: 760px) { #bl h1 { font-size: 22px; } #br { display: none; } }