:root {
  --b: 0.6;
  --w: 0;
  --bg: #060b18;
  --ink: #e8f6fa;
  --cyan: #19e3e0;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, #0c1b3a 0%, #070e22 55%, #03060f 100%);
}

/* very fine grid, fading toward the edges */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(80, 200, 230, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 200, 230, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(80, 200, 230, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 200, 230, 0.035) 1px, transparent 1px);
  background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 25%, transparent 100%);
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

main {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 0 4vw;
}

/* breathing halo behind the wordmark */
.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 3000px);
  height: min(70vh, 1100px);
  transform: translate(-50%, -50%) scale(calc(0.94 + 0.08 * var(--b) + 0.05 * var(--w)));
  background: radial-gradient(ellipse at center,
    rgba(25, 227, 224, 0.20) 0%,
    rgba(42, 120, 255, 0.09) 35%,
    transparent 68%);
  opacity: calc(0.5 + 0.5 * var(--b) + 0.5 * var(--w));
  pointer-events: none;
}

h1#logo {
  position: relative;
  margin: 0;
  width: min(86vw, 2200px);
  color: var(--ink);
  filter: drop-shadow(0 0 10px rgba(25, 227, 224, 0.28));
}

h1#logo svg { display: block; width: 100%; height: auto; overflow: visible; }
h1#logo .stack { display: none; width: min(92vw, 640px); margin: 0 auto; }

h1#logo path {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
  stroke-linecap: butt;
}
h1#logo path.t { color: #cdeff6; }

h1#logo .beam {
  opacity: calc(0.72 + 0.28 * var(--b) + 0.5 * var(--w));
}

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  h1#logo .wide { display: none; }
  h1#logo .stack { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .halo, h1#logo .beam { transition: none; }
}