@charset "UTF-8";
.pixel-field { display:none; }
:root[data-theme="light"] .pixel-field {
  display:block;
  position:absolute;
  inset:0;
  overflow:hidden;
  background-image:linear-gradient(#00000006 1px,transparent 1px),linear-gradient(90deg,#00000006 1px,transparent 1px);
  background-size:32px 32px;
}
.pixel-rails { position:absolute; inset:0; padding:0; margin:0; list-style:none; }
.pixel-rails li { position:absolute; top:0; bottom:0; left:var(--x); width:1px; background:#0000000b; }
.pixel-rails li::after {
  content:"";
  position:absolute;
  left:-1px;
  top:-144px;
  width:3px;
  height:var(--length,96px);
  background:linear-gradient(to bottom,transparent 0 12%,#1111110a 12% 30%,#11111118 30% 48%,#11111130 48% 66%,#11111150 66% 84%,#11111180 84% 100%);
  box-shadow:1px 4px 0 #33333330;
  animation:pixel-fall var(--duration,10s) var(--delay,-3s) infinite cubic-bezier(.4,.26,0,.97);
  animation-play-state:var(--pixel-play-state,running);
}
.pixel-rails li::before {
  content:""; position:absolute; top:var(--cross,30%); left:-3px; width:7px; height:7px;
  border:1px solid #0000001a; background:#f5f5f5;
}
.pixel-rails li:nth-child(1) { --x:6%; --duration:11s; --delay:-4s; --cross:18%; }
.pixel-rails li:nth-child(2) { --x:17%; --duration:14s; --delay:-9s; --length:64px; --cross:73%; }
.pixel-rails li:nth-child(3) { --x:27%; --duration:9s; --delay:-6s; --length:128px; --cross:42%; }
.pixel-rails li:nth-child(4) { --x:38%; --duration:13s; --delay:-2s; --cross:81%; }
.pixel-rails li:nth-child(5) { --x:49%; --duration:10s; --delay:-7s; --length:80px; --cross:24%; }
.pixel-rails li:nth-child(6) { --x:60%; --duration:16s; --delay:-11s; --length:112px; --cross:57%; }
.pixel-rails li:nth-child(7) { --x:71%; --duration:12s; --delay:-5s; --cross:35%; }
.pixel-rails li:nth-child(8) { --x:82%; --duration:15s; --delay:-12s; --length:64px; --cross:86%; }
.pixel-rails li:nth-child(9) { --x:93%; --duration:11s; --delay:-8s; --length:128px; --cross:63%; }
.pixel-field::before,.pixel-field::after {
  content:""; position:absolute; left:-192px; width:160px; height:1px;
  background:repeating-linear-gradient(90deg,#11111155 0 12px,transparent 12px 16px);
  border-right:5px solid #33333380;
  animation:pixel-cross 19s -8s infinite steps(100,end);
  animation-play-state:var(--pixel-play-state,running);
}
.pixel-field::before { top:24%; }
.pixel-field::after { top:73%; animation-duration:27s; animation-delay:-18s; }
@keyframes pixel-fall { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,calc(100vh + 288px),0); } }
@keyframes pixel-cross { from { transform:translate3d(0,0,0); } to { transform:translate3d(calc(100vw + 384px),0,0); } }
:root[data-mesh-paused] { --pixel-play-state:paused; }
:root[data-mesh-motion="off"] :is(.pixel-rails li,.pixel-field)::after,
:root[data-mesh-motion="off"] .pixel-field::before { animation:none; opacity:0; }
@media(prefers-reduced-motion:reduce) {
  :root:not([data-mesh-motion="on"]) :is(.pixel-rails li,.pixel-field)::after,
  :root:not([data-mesh-motion="on"]) .pixel-field::before { animation:none; opacity:0; }
}
@media(max-width:650px) { .pixel-rails li:nth-child(even) { display:none; } }