body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035;
  pointer-events: none;
}
body > * { position: relative; z-index: 1; }
body > canvas.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

@keyframes in {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes shine {
  from { background-position: 100% 50%; }
  to { background-position: -100% 50%; }
}
@keyframes breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.fx-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  color: var(--accent);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.fx-toggle:hover { border-color: var(--accent); box-shadow: 0 0 14px rgba(184, 226, 106, .3); }
.fx-toggle[aria-pressed=false] { color: var(--faint); }

.fx-off .view-head h1, .fx-off .landing h1, .fx-off .landing h1 em, .fx-off .brand img {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.fx-on) *, html:not(.fx-on) *::before, html:not(.fx-on) *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}