:root {
  --m: clamp(18px, 4.5vmin, 44px);
  --ink: rgba(244, 248, 255, 0.62);
}
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
}
/* Fallback "blueprint paper": visible while loading, and forever if WebGL is unavailable. */
body {
  background-color: #000;
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.045), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 48px);
  background-position: center;
}
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}
#gl { transition: opacity 2.6s ease; }
#hud { pointer-events: none; transition: opacity 3s ease 1.2s; }
body.live #gl, body.live #hud { opacity: 1; }

#contact {
  position: fixed;
  right: calc(var(--m) + 12px + env(safe-area-inset-right));
  bottom: calc(var(--m) + 10px + env(safe-area-inset-bottom));
  z-index: 2;
  padding: 8px 0 8px 22px;
  margin-right: -0.34em;
  font: 400 11px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: var(--ink);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  transition: color 0.4s ease;
}
#contact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s ease, left 0.4s ease;
}
#contact:hover, #contact:focus-visible { color: #fff; }
#contact:hover::before, #contact:focus-visible::before { width: 16px; left: -4px; }
#contact:focus-visible { outline: 1px solid rgba(255,255,255,0.5); outline-offset: 4px; }