:root {
  --lime: #c6fb03;
  --lime2: #e4ff7a;
  --limebg: #f4ffcc;
  --dark: #1c3300;
  --dark2: #3a6600;
  --red: #e60000;
  --green: #0a8a00;
}
* { box-sizing: border-box; }
html { background: var(--lime); }
body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  background-color: var(--lime);
  background-image: url("assets/6%20tile.png");
  background-size: 96px 96px;
}
a { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: var(--red); }
img { max-width: 100%; height: auto; }

.page {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  border-left: 3px solid var(--dark);
  border-right: 3px solid var(--dark);
  min-height: 100vh;
}

/* ---------- ticker ---------- */
.ticker {
  background: #000;
  color: var(--lime);
  font: bold 14px/28px "Arial Black", Arial, Helvetica, sans-serif;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 1px;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 30s linear infinite;
}
@keyframes ticker { to { transform: translateX(-100%); } }

/* ---------- header ---------- */
.hdr {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-bottom: 4px double var(--dark);
  background: var(--limebg);
}
.hdr img { width: 140px; height: 140px; flex: 0 0 auto; border: 2px solid var(--dark); }
.hdr h1 {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-weight: normal;
  font-size: clamp(40px, 8vw, 84px);
  line-height: 1;
  margin: 0;
  letter-spacing: 2px;
  color: var(--dark);
  text-shadow: 3px 3px 0 var(--lime);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hdr h1 {
    background: linear-gradient(180deg, #ffffff 0%, #e2e8e2 38%, #7f8c84 50%, #dfe6df 62%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(2px 2px 0 var(--dark)) drop-shadow(0 0 1px var(--dark));
  }
}
.hdr .ticker-name {
  font-family: "Arial Black", Arial, sans-serif;
  font-size: clamp(18px, 3.4vw, 30px);
  color: #000;
  margin: 4px 0 0;
}
.hdr .tag {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 15px;
  margin: 6px 0 0;
  color: #222;
}
.blink { animation: blink 1s steps(1) infinite; color: var(--red); font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- nav ---------- */
.nav {
  background: #f0f0f0;
  border-bottom: 1px solid #999;
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
}
.nav a { margin: 0 4px; }

/* ---------- banner ---------- */
.banner img { width: 100%; height: auto; display: block; border-bottom: 1px solid #999; }

/* ---------- stripe ---------- */
.stripe { height: 12px; background: repeating-linear-gradient(45deg, var(--lime) 0 14px, #000 14px 28px); }

/* ---------- deal ---------- */
.deal {
  margin: 18px 16px;
  border: 5px ridge var(--lime);
  background: var(--limebg);
  padding: 18px 14px;
  text-align: center;
}
.deal h2 {
  font-family: Impact, "Arial Black", Arial, sans-serif;
  font-weight: normal;
  font-size: clamp(26px, 5.4vw, 50px);
  line-height: 1.05;
  margin: 0;
  color: var(--dark);
  text-transform: uppercase;
}
.deal h2 .hi { background: var(--lime); color: #000; padding: 0 8px; }
.deal .big { font-size: clamp(16px, 2.6vw, 22px); font-weight: bold; margin: 12px 0 16px; }
.deal .btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.deal .ca { margin: 14px 0 0; font: 13px "Courier New", monospace; word-break: break-all; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font: bold 18px/1 Arial, Helvetica, sans-serif;
  padding: 13px 26px;
  border: 3px outset var(--lime2);
  background: linear-gradient(var(--lime2), var(--lime));
  color: #000 !important;
  text-decoration: none;
  cursor: pointer;
  text-shadow: 1px 1px 0 #fff;
}
.btn:active { border-style: inset; }
.btn.x { background: linear-gradient(#555, #000); border-color: #777; color: #fff !important; text-shadow: 1px 1px 0 #000; }
.btn.soon { background: #d0d0d0; border-color: #b0b0b0; color: #444 !important; cursor: default; text-shadow: none; }
.btn.small { font-size: 14px; padding: 8px 14px; }

/* ---------- sections ---------- */
.sec { margin: 18px 16px; border: 1px solid var(--dark); background: #fff; }
.sec > h2 {
  background: var(--dark);
  color: var(--lime);
  font: bold 15px/1.2 Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sec .in { padding: 14px; }
.sec p { margin: 0 0 10px; }
.sec p:last-child { margin-bottom: 0; }

.what { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.what img { border: 1px solid #999; background: var(--lime); }
.what .fam {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 16px;
  font-weight: bold;
  color: var(--dark2);
}

/* ---------- chain rank ---------- */
.chains { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.chain { border: 3px double #999; padding: 10px 12px; background: #f6f6f6; text-align: center; }
.chain .num {
  font: bold 46px/1 Impact, "Arial Black", Arial, sans-serif;
  color: #888;
}
.chain h3 { margin: 4px 0 2px; font: bold 15px "Arial Black", Arial, sans-serif; color: #333; }
.chain p { margin: 0; font-size: 13px; }
.chain.top { border-color: var(--dark); background: var(--limebg); }
.chain.top .num { color: var(--dark); text-shadow: 3px 3px 0 var(--lime); font-size: 62px; }
.chain.top h3 { color: var(--dark); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.step { border: 3px inset #ccc; padding: 10px; text-align: center; background: var(--limebg); }
.step img { display: block; margin: 0 auto; border: 1px solid #999; height: 200px; width: 200px; object-fit: cover; background: var(--lime); }
.step img.wide { object-fit: contain; }
.step h3 {
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  font-size: 18px;
  margin: 10px 0 4px;
  color: var(--dark);
}
.step .n { display: inline-block; background: var(--red); color: #fff; font: bold 14px Arial; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; margin-right: 4px; }
.step p { font-size: 13px; }

/* ---------- tracker ---------- */
.tracker .status { display: flex; align-items: center; gap: 8px; font: bold 14px Arial; margin-bottom: 12px; }
.tracker .dot { width: 12px; height: 12px; border-radius: 50%; background: #999; border: 1px solid #555; }
.tracker .status.live .dot { background: var(--red); border-color: #800; animation: blink 1s steps(1) infinite; }
.tracker .status.live .txt { color: var(--red); }
.counterwrap { text-align: center; padding: 12px; background: #f4f4f4; border: 2px groove #bbb; margin-bottom: 12px; }
.counterwrap .lbl { font: bold 14px "Arial Black", Arial, sans-serif; letter-spacing: 2px; color: var(--dark); margin-bottom: 8px; }
.counter { display: inline-flex; gap: 3px; }
.counter b {
  display: inline-block;
  width: 36px;
  height: 50px;
  line-height: 50px;
  background: #000;
  color: var(--lime);
  font: bold 34px/50px "Courier New", Courier, monospace;
  text-align: center;
  border: 2px inset #666;
}
.counterwrap .sub { font-size: 12px; color: #333; margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { border: 2px groove #bbb; padding: 8px; text-align: center; background: #f4f4f4; }
.stat .v { font: bold 20px Arial, sans-serif; color: var(--dark); word-break: break-word; }
.stat .k { font-size: 11px; color: #333; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.tracker h3 { font: bold 14px Arial; margin: 0 0 6px; text-transform: uppercase; }
table.feed { width: 100%; border-collapse: collapse; font-size: 13px; }
.feed th { background: #e6e6e6; border: 1px solid #999; text-align: left; padding: 6px; font-size: 12px; }
.feed td { border: 1px solid #bbb; padding: 6px; }
.feed tr:nth-child(even) td { background: #f7f7f7; }
.feed td.amt { color: var(--green); font-weight: bold; white-space: nowrap; }
.feed td.addr, .feed td.tx { font-family: "Courier New", monospace; }
.feed tr.empty td { text-align: center; color: #555; padding: 14px; }
.verify { font-size: 12px; color: #333; margin-top: 10px; }

/* ---------- 6 facts ---------- */
.facts { margin: 0; padding-left: 0; list-style: none; counter-reset: fact; }
.facts li {
  counter-increment: fact;
  padding: 8px 10px 8px 46px;
  position: relative;
  border-bottom: 1px dotted #999;
  font-size: 14px;
}
.facts li:last-child { border-bottom: 0; }
.facts li::before {
  content: counter(fact);
  position: absolute;
  left: 6px;
  top: 6px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: var(--lime);
  border: 1px solid var(--dark);
  font: bold 16px Impact, "Arial Black", Arial, sans-serif;
  color: var(--dark);
}

/* ---------- meme wall ---------- */
.wall { columns: 3; column-gap: 12px; }
.meme { border: 3px ridge #bbb; background: #fff; padding: 6px; text-align: center; break-inside: avoid; margin-bottom: 12px; }
.wallnote { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; font-weight: bold; }
.meme img { width: 100%; height: auto; display: block; border: 1px solid #999; }
.meme p { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; margin: 6px 0 0; font-size: 13px; }

/* ---------- x box ---------- */
.xbox { margin: 18px 16px; background: #000; color: #fff; text-align: center; padding: 22px 14px; border: 4px double var(--lime); }
.xbox h2 { font-family: Impact, "Arial Black", Arial, sans-serif; font-weight: normal; font-size: clamp(24px, 4.6vw, 40px); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 1px; color: var(--lime); }
.xbox a.handle { color: #fff; font: bold clamp(22px, 4vw, 34px) Arial, sans-serif; text-decoration: underline; display: inline-block; margin: 4px 0 14px; }
.xbox a.handle:hover { color: var(--lime); }
.xbox p { margin: 8px 0 0; color: #ddd; font-size: 13px; }
.xbox img { width: 100%; max-width: 600px; height: auto; margin: 12px auto 0; display: block; border: 2px solid #444; }

/* ---------- footer ---------- */
.foot { border-top: 4px double var(--dark); padding: 16px; font-size: 12px; color: #333; text-align: center; background: var(--limebg); }
.foot p { margin: 4px 0; }
.foot .links a { margin: 0 6px; }
.foot .caline { font-family: "Courier New", monospace; word-break: break-all; }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  .hdr { flex-direction: column; text-align: center; gap: 8px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .wall { columns: 2; }
  .stats { grid-template-columns: 1fr 1fr; }
  .what { grid-template-columns: 1fr; }
  .what img { width: 180px; margin: 0 auto; display: block; }
  .chains { grid-template-columns: 1fr; }
  .sec { margin: 14px 10px; }
  .deal, .xbox { margin: 14px 10px; }
}
@media (max-width: 460px) {
  .steps { grid-template-columns: 1fr; }
  .wall { columns: 1; }
  .step img { width: 100%; height: auto; }
  .counter b { width: 28px; height: 42px; line-height: 42px; font-size: 26px; }
  .btn { font-size: 16px; padding: 12px 18px; width: 100%; text-align: center; }
  .feed th:nth-child(3), .feed td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker span, .blink, .tracker .status.live .dot { animation: none; }
}
.capture .ticker span, .capture .blink, .capture .tracker .status.live .dot { animation: none; }
/* =========================================================
   MEME MODE — playful skin layered over the original site
   Keeps the original layout/logic intact.
   ========================================================= */
:root {
  --paper: #fffef4;
  --ink: #111;
  --hot: #ff4fd8;
  --cyan: #57e6ff;
  --yellow: #fff36b;
}

body {
  background-size: 72px 72px;
  background-attachment: fixed;
}

.page {
  margin-top: 18px;
  margin-bottom: 18px;
  border: 4px solid #000;
  box-shadow: 10px 10px 0 #000;
  overflow: hidden;
}

/* ticker feels more like a chaotic meme broadcast */
.ticker {
  border-bottom: 3px solid #000;
  text-transform: uppercase;
  font-size: 13px;
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.16);
}

/* hero */
.hdr {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 18px;
  background:
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.95) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 60%, rgba(0,0,0,.12) 0 3px, transparent 4px),
    linear-gradient(135deg, #efffa6 0%, var(--limebg) 54%, #fff 54%, #fff 58%, var(--limebg) 58%);
}
.hdr::after {
  content: "NUMBER GO UP?";
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 7px 10px;
  background: var(--yellow);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  font: 900 11px/1 Arial, sans-serif;
  transform: rotate(5deg);
}
.hdr img {
  transform: rotate(-4deg);
  border: 4px solid #000;
  box-shadow: 7px 7px 0 var(--hot);
  border-radius: 18px;
}
.hdr h1 {
  transform: rotate(-1deg);
  display: inline-block;
}
.hdr .tag {
  display: inline-block;
  background: #fff;
  border: 2px dashed #000;
  padding: 6px 10px;
  transform: rotate(1deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.2);
}

/* nav = chunky browser tabs */
.nav {
  padding: 10px;
  background: #fff;
  border-bottom: 3px solid #000;
  line-height: 2.2;
}
.nav a {
  display: inline-block;
  margin: 2px;
  padding: 2px 7px;
  border: 1px solid #000;
  background: var(--limebg);
  color: #000;
  text-decoration: none;
  box-shadow: 2px 2px 0 #000;
}
.nav a:hover { background: var(--yellow); transform: translate(-1px,-1px); }

.banner { position: relative; background: #000; }
.banner img { filter: saturate(1.08) contrast(1.04); }
.banner::after {
  content:
  position: absolute;
  left: 18px;
  bottom: 15px;
  background: #fff;
  border: 2px solid #000;
  padding: 6px 10px;
  font: bold 12px "Comic Sans MS", cursive;
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 #000;
}

.stripe { height: 15px; border-top: 2px solid #000; border-bottom: 2px solid #000; }

/* deal card */
.deal {
  position: relative;
  border: 4px solid #000;
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 8px 8px 0 #000;
  transform: rotate(-.35deg);
  padding: 24px 18px;
}
.deal::before {
  content: "it’s 6";
  position: absolute;
  top: -16px;
  left: 20px;
  background: var(--hot);
  color: #000;
  border: 3px solid #000;
  padding: 7px 11px;
  font: 900 12px Arial, sans-serif;
  transform: rotate(-7deg);
  box-shadow: 3px 3px 0 #000;
}
.deal::after {
  content: "*not financial advice lol";
  position: absolute;
  right: 12px;
  bottom: -13px;
  background: var(--cyan);
  border: 2px solid #000;
  padding: 4px 8px;
  font: bold 10px Arial, sans-serif;
  transform: rotate(3deg);
}
.deal h2 .hi {
  display: inline-block;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  transform: rotate(-1deg);
}

/* buttons */
.btn {
  border: 3px solid #000;
  border-radius: 999px;
  box-shadow: 5px 5px 0 #000;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px,-2px) rotate(-1deg); box-shadow: 8px 8px 0 #000; }
.btn:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 #000; }
.btn.x { background: #000; border-color: #000; }

/* content sections */
.sec {
  position: relative;
  border: 3px solid #000;
  border-radius: 16px;
  box-shadow: 6px 6px 0 #000;
  overflow: visible;
  background: var(--paper);
}
.sec:nth-of-type(even) { transform: rotate(.18deg); }
.sec:nth-of-type(odd) { transform: rotate(-.18deg); }
.sec > h2 {
  border-radius: 11px 11px 0 0;
  border-bottom: 3px solid #000;
  font-family: "Arial Black", Impact, sans-serif;
}
.sec .in { padding: 18px; }

.what img {
  border: 4px solid #000;
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--cyan);
  transform: rotate(-3deg);
}
.what .fam {
  display: inline-block;
  padding: 5px 8px;
  background: var(--yellow);
  border: 2px solid #000;
  transform: rotate(-1deg);
}

.chain {
  border: 3px solid #000;
  border-radius: 13px;
  box-shadow: 4px 4px 0 #000;
}
.chain:nth-child(1) { transform: rotate(-2deg); }
.chain:nth-child(2) { transform: rotate(1.5deg); }
.chain:nth-child(3) { transform: rotate(-.7deg) scale(1.03); }
.chain.top { background: linear-gradient(145deg, var(--limebg), #fff); }
.chain.top::after { content: "👑"; display: block; font-size: 24px; margin-top: 5px; }

.step {
  position: relative;
  border: 3px solid #000;
  border-radius: 16px;
  box-shadow: 5px 5px 0 #000;
  background: #fff;
}
.step:nth-child(1) { transform: rotate(-1.4deg); }
.step:nth-child(2) { transform: rotate(1deg); }
.step:nth-child(3) { transform: rotate(-.4deg); }
.step img { border: 3px solid #000; border-radius: 11px; }
.step .n { border: 2px solid #000; box-shadow: 2px 2px 0 #000; }

/* tracker = arcade machine */
.tracker { background: #101010; color: #fff; }
.tracker > h2 { background: var(--lime); color: #000; }
.tracker .in { background: radial-gradient(circle at 50% 0, #2a2a2a, #0c0c0c 65%); border-radius: 0 0 12px 12px; }
.tracker a { color: var(--lime); }
.tracker a:visited { color: var(--lime2); }
.counterwrap {
  background: #090909;
  border: 4px solid #777;
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px #222, 5px 5px 0 #000;
}
.counterwrap .lbl { color: var(--lime); }
.counter b {
  border: 2px solid #555;
  border-radius: 6px;
  box-shadow: inset 0 -7px 0 rgba(255,255,255,.06), 0 0 12px rgba(198,251,3,.15);
}
.counterwrap .sub, .tracker .verify { color: #bbb; }
.stat {
  border: 2px solid #777;
  border-radius: 10px;
  background: #171717;
  box-shadow: 3px 3px 0 #000;
}
.stat .v { color: var(--lime); }
.stat .k { color: #aaa; }
.feed th { background: var(--lime); color: #000; border-color: #000; }
.feed td { background: #111; color: #eee; border-color: #555; }
.feed tr:nth-child(even) td { background: #1a1a1a; }
.feed tr.empty td { color: #bbb; }

/* facts = sticky notes */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.facts li {
  border: 2px solid #000 !important;
  background: #fff;
  min-height: 70px;
  box-shadow: 4px 4px 0 #000;
  border-radius: 6px;
}
.facts li:nth-child(3n+1) { background: #fff7a8; transform: rotate(-1deg); }
.facts li:nth-child(3n+2) { background: #dffcff; transform: rotate(.8deg); }
.facts li:nth-child(3n) { background: #ffdff6; transform: rotate(-.5deg); }

/* meme wall */
.meme {
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0 #000;
  transition: transform .14s ease;
}
.meme:nth-child(odd) { transform: rotate(-1deg); }
.meme:nth-child(even) { transform: rotate(1deg); }
.meme:hover { transform: rotate(0) scale(1.025); z-index: 2; }
.meme img { border: 2px solid #000; border-radius: 5px; }
.meme p { font-weight: bold; }

.xbox {
  position: relative;
  border: 4px solid #000;
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--lime);
  transform: rotate(.25deg);
}
.xbox::before {
  content: "POST FIRST. THINK LATER.";
  position: absolute;
  top: -15px;
  right: 18px;
  background: var(--hot);
  color: #000;
  border: 3px solid #000;
  padding: 6px 9px;
  font: 900 10px Arial, sans-serif;
  transform: rotate(4deg);
}
.xbox img { border: 3px solid var(--lime); border-radius: 12px; }

.foot { background: #fff; border-top: 4px solid #000; }

/* silly cursor-ish hover energy without custom assets */
@media (hover:hover) {
  .chain:hover, .step:hover, .stat:hover { transform: translateY(-3px) rotate(0); }
}

@media (max-width:720px) {
  .page { margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .hdr::after { position: static; display: inline-block; margin: 8px auto 0; }
  .facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .meme { transition: none; }
}
.meme-pill {
  display:inline-block; margin-left:6px; padding:4px 7px; background:var(--cyan); border:2px solid #000;
  box-shadow:2px 2px 0 #000; font:900 10px Arial,sans-serif; transform:rotate(3deg); vertical-align:middle;
}
.tiny-chaos { display:inline-block; margin:0 0 16px; padding:4px 8px; background:#fff; border:2px dashed #000; font:bold 12px "Comic Sans MS",cursive; transform:rotate(-1deg); }
@keyframes bonk { 0%{transform:scale(1)} 35%{transform:scale(.96) rotate(-2deg)} 70%{transform:scale(1.04) rotate(2deg)} 100%{transform:scale(1)} }
.meme.bonk { animation: bonk .28s ease; }