:root{
  --ink:#0c0c11;
  --ink-deep:#050506;
  --paper:#f4f1e9;
  --paper-dim:#9a97a6;
  --cyan:#4fe0e8;
  --magenta:#ef4d8f;
  --line:#2a2a38;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
}

body{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:32px;
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 30% 20%, rgba(79,224,232,.10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 75% 85%, rgba(239,77,143,.10), transparent 60%),
    radial-gradient(ellipse at center, transparent 35%, var(--ink-deep) 125%);
}

.sprockets{
  position:fixed;
  left:0;
  right:0;
  height:18px;
  display:flex;
  gap:14px;
  padding:0 22px;
  align-items:center;
  pointer-events:none;
  opacity:.5;
}
.sprockets--top{top:0;}
.sprockets--bottom{bottom:0;}
.sprockets span{
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--line);
  flex-shrink:0;
}

.rec{
  position:fixed;
  top:26px;
  left:26px;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--paper-dim);
  text-transform:uppercase;
}
.rec i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--magenta);
  display:inline-block;
  animation:blink 1.6s ease-in-out infinite;
}

@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:.15;}
}

main{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:640px;
  width:100%;
}

.badge{
  display:inline-block;
  background:var(--magenta);
  color:var(--ink-deep);
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:3px;
  transform:rotate(-2.5deg);
  margin:0 0 36px;
}

.eq{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:58px;
  margin:0 0 30px;
}
.eq span{
  width:6px;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,var(--cyan),var(--magenta));
  transform-origin:bottom;
  animation:pulse 1.2s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{transform:scaleY(.4);}
  50%{transform:scaleY(1);}
}

h1{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(50px,10vw,92px);
  letter-spacing:.01em;
  margin:0 0 14px;
  color:var(--paper);
  line-height:.92;
}

.pronounce{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--cyan);
  margin:0 0 26px;
  display:flex;
  align-items:center;
  gap:8px;
}
.pronounce b{
  color:var(--paper);
  font-weight:500;
}

.tagline{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-style:italic;
  font-size:19px;
  color:var(--paper-dim);
  margin:0 0 30px;
}

.desc{
  font-size:14.5px;
  line-height:1.7;
  color:var(--paper-dim);
  max-width:420px;
  margin:0 0 40px;
}

.rule{
  width:100%;
  max-width:280px;
  height:1px;
  background:var(--line);
  margin:0 0 26px;
}

footer{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--paper-dim);
  opacity:.75;
}

footer span{
  color:var(--cyan);
}

.build{
  position:fixed;
  bottom:26px;
  right:26px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--paper-dim);
  opacity:.55;
  text-transform:lowercase;
}
.build b{
  color:var(--cyan);
  font-weight:500;
}

@media (max-width:520px){
  .sprockets{gap:9px;}
  .rec{top:18px;left:18px;}
  .build{bottom:18px;right:18px;font-size:10px;}
  .eq{height:44px;}
  .desc{font-size:13.5px;}
}

@media (prefers-reduced-motion:reduce){
  .eq span{animation:none;transform:scaleY(.75);}
  .rec i{animation:none;}
}