/* Self-hosted fonts (latin subset, weight 400): Silkscreen and IBM Plex Mono, both SIL Open Font License 1.1 */
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url(silkscreen-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(ibm-plex-mono-400.woff2) format("woff2")}
/* Layout: full-bleed WebGL scene; intro line fades in, then the voxel logo rises and spins */
:root{
  --void:#05030c; --ink:#d9d4ff; --dim:#7d76a8; --glow:#9d7bff;
  --pixel:"Silkscreen","Courier New",monospace; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:dark;
}
html,body{height:100%;margin:0;background:var(--void);color:var(--ink);overflow:hidden}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%}
.intro{position:fixed;inset:0;display:grid;place-items:center;padding-inline:16px;pointer-events:none;z-index:2}
.intro p{font-family:var(--mono);font-size:clamp(15px,2.6vw,24px);letter-spacing:.06em;text-align:center;text-wrap:balance;max-width:34ch;color:var(--glow);margin:0;opacity:0;animation:intro 7s ease forwards}
.tag{position:fixed;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom,0px));text-align:center;font-family:var(--pixel);font-size:clamp(11px,1.6vw,14px);letter-spacing:.35em;color:var(--dim);z-index:2;opacity:0;animation:tag 1.5s ease 6.5s forwards;padding-inline:16px}
.ctl{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:16px;z-index:3;font-family:var(--pixel);font-size:11px;letter-spacing:.15em;background:transparent;color:var(--dim);border:1px solid #2a2445;padding:8px 12px;cursor:pointer}
.ctl:hover,.ctl:focus-visible{color:var(--ink);border-color:var(--glow);outline:none}
@keyframes intro{0%{opacity:0;transform:translateY(8px)}15%,60%{opacity:1;transform:none}85%,100%{opacity:0}}
@keyframes tag{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.intro p{animation:none;opacity:0}.tag{animation:none;opacity:1}}