:root{
  --void:      #06050e;
  --deep:      #0a0817;
  --panel:     #110e23;
  --panel-hi:  #181330;
  --line:      #29204c;
  --line-soft: #1c1636;
  --line-hi:   #3d3170;

  --plasma:    #9b3cd3;
  --plasma-lo: #4723a9;
  --magenta:   #e6377d;
  --amber:     #ffb648;
  --accent:    #e0664a;

  --star:  #f7f4ff;
  --mid:   #e2ddf0;
  --dim:   #cac3da;
  --faint: #c0b8d1;
  --ghost: #aaa1c0;

  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sans: var(--mono);

  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);
  --swipe: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--void);
  color:var(--star);
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:400;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; line-height:1.02; font-weight:700; letter-spacing:-.045em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

code{
  font-family:var(--mono);
  font-size:.92em; color:var(--accent);
  background:rgba(224,102,74,.12);
  border:1px solid var(--line-soft);
  padding:1px 5px;
}

::selection{ background:var(--accent); color:var(--mid); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.wrap{ width:min(1180px, 100% - var(--pad)*2); margin-inline:auto; }

.micro{
  font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--mid); margin-bottom:12px;
}

#sky{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

.grain{
  position:fixed; inset:-8px; z-index:2; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 640ms steps(3) infinite;
}
@keyframes grainshift{
  0%{ transform:translate(0,0) } 33%{ transform:translate(-4px,2px) }
  66%{ transform:translate(2px,-4px) } 100%{ transform:translate(4px,2px) }
}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 92% at 50% 2%, transparent 38%, rgba(3,2,8,.8) 100%);
}

main, .nav{ position:relative; z-index:3; }

.reveal{
  opacity:0;
  transform:translate3d(22px,0,0) scale(.994);
}
.reveal.solid{ opacity:1; }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .52s ease, transform .9s var(--ease);
  transition-delay:var(--d, 0ms);
}

.cut{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em .1em; margin:0 -.06em; }
.cut i{
  display:inline-block; font-style:normal;
  transform:translateY(115%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--d, 0ms) + 60ms);
}
.reveal.in .cut i{ transform:none; }