*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#ece7d7;
  color:#0a0a0a;
  font-family:"Comic Sans MS","Trebuchet MS",sans-serif;
  overflow-x:hidden;
}
.scanlines{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 4px)
}
.marquee{
  overflow:hidden;white-space:nowrap;background:#000;color:#37ff3d;
  border-bottom:5px solid #000;font:bold 20px monospace
}
.track{display:inline-block;min-width:200%;padding:9px 0;animation:scroll 24s linear infinite}
.reverse{animation-direction:reverse}
@keyframes scroll{to{transform:translateX(-50%)}}

header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  background:#cbb7ff;border-bottom:5px solid #000;padding:8px
}
header a,header button{
  color:#000;text-decoration:none;background:#d8c8ff;border:4px outset #fff;
  padding:10px 18px;font:900 17px "Comic Sans MS";cursor:pointer
}
header button{background:#ff2b2b}
header a:hover,header button:hover{transform:rotate(-2deg) scale(1.05)}

main{max-width:1400px;margin:auto;padding:24px}
.hero{
  min-height:82vh;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;
  gap:30px;position:relative
}
.warning{
  display:inline-block;background:#fff000;border:5px solid #000;
  padding:8px 14px;font:900 18px monospace;transform:rotate(-3deg)
}
h1{
  margin:20px 0 0;font-size:clamp(78px,11vw,180px);line-height:.8;
  letter-spacing:-8px;transform:rotate(-2deg);
  text-shadow:7px 7px 0 #ff2c2c,13px 13px 0 #cdb8ff
}
.ticker{
  display:inline-block;margin:24px 0 0;background:#cab8ff;border:6px solid #000;
  padding:5px 18px;font-size:50px;font-weight:900;transform:rotate(4deg)
}
.tag{
  font-size:42px;color:#a30000;font-weight:900;margin:20px 0 24px;
  transform:rotate(-2deg)
}
.ca-box{
  background:#fff;border:5px solid #000;padding:16px;
  display:flex;align-items:center;gap:10px;max-width:650px;box-shadow:9px 9px 0 #000;
  font:900 16px monospace
}
.ca-box code{flex:1;word-break:break-all}
.ca-box button{border:4px outset #fff;background:#ccb9ff;padding:8px 12px;font-weight:900;cursor:pointer}
.buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}
.buttons a{
  text-decoration:none;color:#000;border:5px outset #fff;padding:14px 18px;
  font:900 18px Arial Black;background:#44b5ff;box-shadow:6px 6px #000
}
.buttons a:first-child{background:#9b45d2;color:#fff}
.buttons a:nth-child(3){background:#35c6ff}

.thing-wrap{position:relative;display:flex;justify-content:center;align-items:center}
.thing{
  width:min(720px,95%);display:block;filter:contrast(1.08);mix-blend-mode:multiply;
  animation:breathe 3s ease-in-out infinite
}
@keyframes breathe{50%{transform:scale(1.025) rotate(.5deg)}}
.label{
  position:absolute;background:#fff;border:4px solid #000;padding:7px 10px;
  font:900 16px monospace
}
.l1{left:4%;top:12%;transform:rotate(-8deg);background:#ff5656}
.l2{right:4%;top:30%;transform:rotate(8deg);background:#fff000}
.l3{right:10%;bottom:14%;transform:rotate(-5deg);background:#8cff88}

.paper{
  background:#fffbe0;border:5px solid #000;box-shadow:12px 12px 0 #000;
  padding:38px;margin:60px 0;transform:rotate(.7deg)
}
.paper h2,.roadmap h2{
  font-size:clamp(46px,7vw,90px);margin:0 0 25px;text-decoration:underline wavy #b20000
}
.paper p{
  width:max-content;max-width:100%;font-size:30px;font-weight:900;
  background:#fff;padding:4px 9px;border:3px solid #000;margin:10px 0
}
.paper .huge{font-size:48px;background:#ffef51;transform:rotate(-1deg)}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:70px 0}
.card{
  background:#ffdede;border:6px solid #000;padding:28px;text-align:center;
  font:900 24px monospace;min-height:150px;display:flex;flex-direction:column;justify-content:center
}
.card:nth-child(2){background:#d9ffd5;transform:rotate(2deg)}
.card:nth-child(3){background:#d8ceff;transform:rotate(-2deg)}
.card:nth-child(4){background:#fff39a;transform:rotate(3deg)}
.card b{font-size:42px}

.live{
  max-width:780px;margin:80px auto;border:7px solid #000;background:#000;color:#fff;
  box-shadow:15px 15px 0 #7d0000
}
.live-title{padding:10px 14px;font:900 22px monospace}
.feed{position:relative;height:430px;overflow:hidden;background:#111}
.feed img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) contrast(2.2) brightness(.55)}
.censor{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%) rotate(-2deg);
  background:#d60000;border:4px solid #000;color:#fff;padding:7px 24px;font:900 26px Arial Black
}

.roadmap{margin:80px 0;text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.steps div{
  background:#d8ffd5;border:6px dashed #000;min-height:180px;padding:20px;
  display:flex;flex-direction:column;justify-content:center;font:900 22px monospace
}
.steps div:nth-child(even){background:#f3d6ff;transform:translateY(12px)}
.steps b{font-size:28px}

.errorbox{
  max-width:850px;margin:90px auto 120px;background:#c0c0c0;border:7px outset #eee;
  box-shadow:14px 14px 0 #000;font-family:Tahoma,Arial,sans-serif
}
.error-title{background:#000080;color:#fff;padding:8px 12px;font-weight:700}
.error-body{display:flex;gap:18px;align-items:center;padding:30px;font-size:22px}
.error-body .x{font-size:60px;color:#d00}
.error-actions{display:flex;justify-content:center;gap:12px;padding:0 20px 25px;flex-wrap:wrap}
.error-actions button{border:4px outset #eee;background:#ddd;padding:10px 18px;font-weight:700;cursor:pointer}

.bottom{border-top:5px solid #000}
#toast{
  position:fixed;left:50%;bottom:25px;transform:translate(-50%,130px);
  background:#000;color:#45ff45;border:4px solid #45ff45;padding:12px 20px;
  z-index:10000;font:900 18px monospace;transition:.2s
}
#toast.show{transform:translate(-50%,0)}

.panic-mode{animation:panic .12s steps(2,end) infinite}
@keyframes panic{
  50%{filter:hue-rotate(90deg) invert(.08);transform:translateX(2px)}
}

.eye{
  position:fixed;width:46px;height:46px;border-radius:50%;background:#000;z-index:500;
  box-shadow:inset 0 0 0 10px #fff,0 0 0 5px #000;pointer-events:none
}
.eye:after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:11px;top:11px
}

@media(max-width:850px){
  .hero{grid-template-columns:1fr}
  .right{order:-1}
  h1{letter-spacing:-4px}
  .facts,.steps{grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
  .facts,.steps{grid-template-columns:1fr}
  .ca-box{flex-direction:column;align-items:stretch}
  .tag{font-size:30px}
}