*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Comic Sans MS","Arial Black",cursive;
  color:#111;
  background:
    linear-gradient(90deg,#fff 0 25%,#d9d9ff 25% 50%,#fff 50% 75%,#e8ffe1 75%);
  background-size:26px 26px;
  overflow-x:hidden;
}
body.badder{filter:contrast(1.35) saturate(1.5)}
.noise{
  pointer-events:none;position:fixed;inset:0;z-index:9999;opacity:.08;
  background-image:radial-gradient(#000 1px,transparent 1px);background-size:4px 4px;
}
.top-marquee,.bottom-marquee{
  background:#000;color:#fff;border-top:6px solid #ff00d4;border-bottom:6px solid #00ff2a;
  overflow:hidden;white-space:nowrap;font-weight:900;font-size:22px;letter-spacing:1px
}
.marquee-track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.marquee-track span{padding:10px 28px}
.reverse{animation-direction:reverse;animation-duration:33s}
@keyframes scroll{to{transform:translateX(-25%)}}

main{max-width:1180px;margin:auto;padding:24px}
.hero{text-align:center;position:relative;padding:28px 0 55px}
h1{
  margin:8px 0 0;font-size:clamp(58px,11vw,145px);line-height:.83;
  letter-spacing:-6px;transform:skew(-5deg) rotate(-1deg);
  text-shadow:5px 5px 0 #00ff37,10px 10px 0 #ff00cf;
}
.ticker{
  display:inline-block;background:#fffb00;border:5px solid #000;padding:4px 18px;
  font-size:40px;font-weight:900;transform:rotate(3deg);margin:18px 0
}
.stamp{
  position:absolute;right:1%;top:18px;border:5px dashed red;color:red;background:#fff;
  padding:10px;font:900 20px monospace;transform:rotate(9deg)
}
.jpeg-frame{
  position:relative;width:min(580px,90vw);margin:20px auto;
  border:12px ridge #aaa;background:#c9c9c9;padding:8px;
  box-shadow:17px 17px 0 #222
}
.jpeg-frame img{
  display:block;width:100%;image-rendering:pixelated;
  filter:contrast(1.08) saturate(.9)
}
.corner{
  position:absolute;z-index:3;background:#000;color:#0f0;padding:4px 8px;
  font:900 16px monospace
}
.c1{left:-18px;top:-18px}.c2{right:-18px;bottom:-18px}
.tagline{font-size:38px;font-weight:900;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.tagline span:first-child{transform:rotate(-4deg)}
.tagline span:last-child{transform:rotate(5deg);color:#d60000}

.button-chaos{display:flex;flex-wrap:wrap;justify-content:center;gap:13px;margin:28px auto}
.ugly-btn{
  color:#000;text-decoration:none;border:5px outset #eee;padding:14px 20px;
  font:900 19px "Arial Black",sans-serif;cursor:pointer;box-shadow:5px 5px 0 #000;
  transition:.08s
}
.ugly-btn:hover{transform:translate(5px,5px) rotate(-2deg);box-shadow:none}
.red{background:#ff2424}.blue{background:#28a8ff}.green{background:#4dff5b}.yellow{background:#fff500}

.ca-box{
  margin:25px auto 0;max-width:760px;background:#000;color:#00ff32;border:7px double #fff;
  padding:18px;font:700 16px monospace;transform:rotate(-.5deg)
}
.ca-box code{display:block;word-break:break-all;margin:10px 0;color:#fff}
.ca-box button{background:#c7c7c7;border:4px outset #fff;padding:8px 14px;font-weight:900;cursor:pointer}

.lore{padding:40px 0;display:grid;gap:25px}
.window{background:#c0c0c0;border:6px outset #fff;box-shadow:13px 13px 0 #000;transform:rotate(1deg)}
.window-bar{background:#000080;color:#fff;padding:7px 10px;font:700 16px monospace;display:flex;justify-content:space-between}
.window-bar button{width:26px;height:24px;border:3px outset #eee;font-weight:bold}
.window-body{padding:25px;text-align:left;font-size:28px}
.window-body h2{font-size:50px;margin:0 0 20px;text-decoration:underline wavy red}
.important{font-size:40px;font-weight:900;background:#ff0;display:inline-block}
.fake-error{
  background:#fff;border:8px solid red;padding:24px;text-align:center;
  font:900 25px monospace;animation:shake .7s steps(2,end) infinite
}
@keyframes shake{50%{transform:translateX(3px) rotate(.4deg)}}
.facts{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  font:900 25px monospace
}
.facts div{border:5px solid #000;padding:20px;background:#fff}
.facts div:nth-child(2n){background:#00ff48;transform:rotate(1deg)}
.facts div:nth-child(3n){background:#ff00c8;transform:rotate(-1deg)}

.gallery,.roadmap{padding:45px 0;text-align:center}
.gallery h2,.roadmap h2{font-size:55px;margin:0 0 30px;text-shadow:4px 4px #ff0}
.pixel-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pixel-card{background:#fff;border:5px solid #000;padding:8px;font:900 18px monospace}
.pixel-card img{width:100%;display:block;image-rendering:pixelated}
.blur1 img{filter:contrast(1.4) saturate(1.5)}
.blur2 img{filter:blur(2px) contrast(1.8);image-rendering:pixelated}
.blur3 img{filter:blur(5px) contrast(2.3) saturate(2)}
.pixel-card:nth-child(2){transform:rotate(2deg)}
.pixel-card:nth-child(3){transform:rotate(-3deg)}
.pixel-card:nth-child(4){transform:rotate(4deg)}

.roadmap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.roadmap-grid div{
  min-height:150px;padding:20px;border:6px dotted #000;background:#fffe7a;
  font:900 24px monospace;display:flex;flex-direction:column;justify-content:center
}
.roadmap-grid div:nth-child(even){background:#bbffb2;transform:translateY(12px)}
.bottom-marquee{margin-top:40px}

#toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);
  background:#000;color:#0f0;border:4px solid #0f0;padding:14px 24px;
  z-index:10000;font:900 18px monospace;transition:.2s
}
#toast.show{transform:translate(-50%,0)}

.floating-jpeg{
  position:fixed;width:80px;height:80px;object-fit:cover;z-index:99;
  border:4px solid #000;pointer-events:none;image-rendering:pixelated
}

@media(max-width:760px){
  main{padding:14px}
  .stamp{position:static;display:inline-block;margin-bottom:12px}
  h1{letter-spacing:-3px}
  .facts,.pixel-row,.roadmap-grid{grid-template-columns:1fr 1fr}
  .window-body{font-size:22px}
}
@media(max-width:480px){
  .facts,.pixel-row,.roadmap-grid{grid-template-columns:1fr}
}