:root {
  color-scheme: dark;
  --ink: #050607;
  --orange: #f96a0e;
  --violet: #9c78e7;
  --gold: #c6a35c;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  cursor: default;
  user-select: none;
}

.space,
#brain,
.vignette {
  position: fixed;
  inset: 0;
}

.space {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(20, 12, 8, .72), transparent 31%),
    radial-gradient(ellipse at 18% 72%, rgba(90, 35, 8, .08), transparent 31%),
    radial-gradient(ellipse at 82% 24%, rgba(80, 48, 130, .07), transparent 28%),
    #050607;
}

.nebula {
  position: absolute;
  inset: -35%;
  filter: blur(55px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.aurora {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 28%;
  border-radius: 50%;
  filter: blur(52px);
  mix-blend-mode: screen;
  opacity: .16;
  will-change: transform, opacity;
  pointer-events: none;
}

.aurora-a {
  top: 24%;
  background: linear-gradient(90deg, transparent 4%, rgba(249, 106, 14, .05) 28%, rgba(198, 163, 92, .10) 48%, rgba(156, 120, 231, .055) 66%, transparent 94%);
  animation: auroraA 47s ease-in-out infinite alternate;
}

.aurora-b {
  top: 49%;
  background: linear-gradient(90deg, transparent 8%, rgba(156, 120, 231, .05) 34%, rgba(249, 106, 14, .075) 55%, transparent 90%);
  animation: auroraB 61s ease-in-out infinite alternate;
}

.aurora-c {
  top: 63%;
  height: 17%;
  opacity: .1;
  background: linear-gradient(90deg, transparent 12%, rgba(198, 163, 92, .07) 43%, rgba(249, 106, 14, .04) 72%, transparent 92%);
  animation: auroraC 73s ease-in-out infinite alternate;
}

.nebula-a {
  background:
    radial-gradient(ellipse at 51% 50%, rgba(249, 106, 14, .10), transparent 18%),
    radial-gradient(ellipse at 43% 58%, rgba(198, 163, 92, .055), transparent 13%),
    radial-gradient(ellipse at 16% 32%, rgba(249, 106, 14, .035), transparent 16%);
  animation: nebulaDriftA 43s ease-in-out infinite alternate;
}

.nebula-b {
  background:
    radial-gradient(ellipse at 57% 44%, rgba(156, 120, 231, .065), transparent 17%),
    radial-gradient(ellipse at 86% 68%, rgba(156, 120, 231, .032), transparent 19%),
    radial-gradient(ellipse at 22% 77%, rgba(198, 163, 92, .025), transparent 15%);
  animation: nebulaDriftB 59s ease-in-out infinite alternate;
}

.vignette {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 14%, transparent 86%, rgba(0, 0, 0, .45)),
    radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .62) 100%);
}

#brain {
  width: 100%;
  height: 100%;
  display: block;
}

.signature {
  position: fixed;
  right: 2.1vw;
  bottom: 2.2vh;
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(236, 233, 226, .22);
  font: 500 clamp(8px, .48vw, 11px)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .34em;
  pointer-events: none;
}

.mark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px 3px rgba(249, 106, 14, .55);
  animation: markPulse 4.7s ease-in-out infinite;
}

@keyframes nebulaDriftA {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .7; }
  to { transform: translate3d(2%, 1.4%, 0) scale(1.08); opacity: 1; }
}

@keyframes nebulaDriftB {
  from { transform: translate3d(1.5%, 1.2%, 0) scale(1.05); opacity: .75; }
  to { transform: translate3d(-2.2%, -1.3%, 0) scale(1); opacity: 1; }
}

@keyframes markPulse {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.4); }
}

@keyframes auroraA {
  from { transform: translate3d(-4%, -5%, 0) rotate(-3deg) scaleY(.72); opacity: .08; }
  to { transform: translate3d(4%, 8%, 0) rotate(2deg) scaleY(1.18); opacity: .2; }
}

@keyframes auroraB {
  from { transform: translate3d(5%, 6%, 0) rotate(2deg) scaleY(1.1); opacity: .14; }
  to { transform: translate3d(-5%, -7%, 0) rotate(-2deg) scaleY(.78); opacity: .06; }
}

@keyframes auroraC {
  from { transform: translate3d(-2%, 8%, 0) rotate(1deg); }
  to { transform: translate3d(3%, -9%, 0) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nebula,
  .aurora,
  .mark { animation: none; }
}

.reduce-effects .nebula,
.reduce-effects .aurora,
.reduce-effects .mark {
  animation: none;
}