:root {
  color-scheme: dark;
  --bg-top: #09111b;
  --bg-bottom: #020406;
  --mist: rgba(145, 198, 255, 0.18);
  --ice: #edf4ff;
  --wire: rgba(122, 173, 232, 0.55);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(118, 162, 214, 0.24), transparent 28%),
    radial-gradient(circle at 50% 72%, rgba(111, 163, 208, 0.08), transparent 36%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}

.scene-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 38%, rgba(2, 4, 6, 0.12) 66%, rgba(2, 4, 6, 0.62) 100%),
    linear-gradient(180deg, rgba(4, 9, 14, 0.14) 0%, transparent 26%, transparent 62%, rgba(2, 4, 6, 0.4) 100%);
}

.scene-fade {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 4, 6, 0) 0%, rgba(2, 4, 6, 0.2) 35%, rgba(2, 4, 6, 0.78) 100%),
    radial-gradient(circle at 50% 100%, rgba(77, 112, 150, 0.16) 0%, rgba(77, 112, 150, 0.08) 26%, transparent 58%);
}