:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #050505;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: #050505;
  color: rgba(255, 255, 255, 0.78);
}

.splash {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  isolation: isolate;
  background: radial-gradient(circle at 50% 45%, #111 0%, #070707 55%, #030303 100%);
}

#dot-field { position: absolute; inset: 0; width: 100%; height: 100%; }

.vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.76) 115%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.32));
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}