*{margin:0;padding:0;box-sizing:border-box}
:root{
  --white:#ffffff; --paper:#f4f4f2; --gray:#d9d9d9; --mid:#8a8a8a;
  --ink:#111111; --ink2:#2b2b2b; --shadow:6px 6px 0 #111111;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Fredoka','Comic Sans MS','Segoe UI',system-ui,sans-serif;overflow-x:hidden;
  background-image:radial-gradient(#11111122 1.5px, transparent 1.5px);background-size:26px 26px;}
::selection{background:#111;color:#fff}

/* floating doodles */
.doodles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.doodle{position:absolute;font-size:2rem;color:#111;opacity:.14;animation:floaty 7s ease-in-out infinite alternate}
.d1{top:12%;left:6%}.d2{top:22%;right:8%;font-size:1.2rem}
.d3{top:55%;left:4%}.d4{bottom:18%;right:6%;font-size:2.4rem}
.d5{top:38%;right:12%;font-size:1rem}.d6{bottom:30%;left:10%}
.d7{top:70%;left:45%}.d8{top:10%;left:50%;font-size:1.2rem}
@keyframes floaty{from{transform:translateY(-14px) rotate(-8deg)}to{transform:translateY(14px) rotate(10deg)}}

/* nav */
#nav{position:sticky;top:12px;z-index:10;display:flex;justify-content:space-between;align-items:center;
  margin:12px auto;max-width:1100px;padding:12px 22px;background:var(--white);
  border:3px solid var(--ink);border-radius:20px;box-shadow:var(--shadow)}
.logo{font-weight:700;font-size:1.25rem}
.logo-face{display:inline-block;background:#111;color:#fff;border-radius:12px;padding:2px 10px;margin-right:8px;transform:rotate(-4deg)}
.links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.links a{color:var(--ink);text-decoration:none;font-weight:600;transition:.2s}
.links a:hover{transform:rotate(-2deg) scale(1.08)}
.btn-sm{border:3px solid var(--ink);padding:6px 16px;border-radius:99px;background:#111;color:#fff!important;box-shadow:3px 3px 0 #8a8a8a}
.btn-sm:hover{background:#fff;color:#111!important}

/* hero */
.hero{text-align:center;padding:70px 20px 40px;max-width:920px;margin:auto;position:relative;z-index:1}
.pill{display:inline-block;border:3px solid var(--ink);background:var(--white);padding:8px 22px;border-radius:99px;margin-bottom:26px;box-shadow:4px 4px 0 #111;transform:rotate(-1.5deg);font-weight:500}
.hero h1{font-size:clamp(3.2rem,10vw,6rem);font-weight:700;letter-spacing:-1px;line-height:1}
.hero h1 .outline{color:#fff;-webkit-text-stroke:3px #111;text-stroke:3px #111;text-shadow:4px 4px 0 #d9d9d9}
.hero h1 .fill{background:#111;color:#fff;padding:0 18px;border-radius:18px;display:inline-block;transform:rotate(2deg);box-shadow:var(--shadow)}
.bubble{background:var(--white);border:3px solid var(--ink);border-radius:22px;padding:18px 24px;color:var(--ink2);
  font-size:1.1rem;margin:26px auto;max-width:640px;line-height:1.7;box-shadow:var(--shadow);position:relative}
.bubble::after{content:'';position:absolute;bottom:-16px;left:50%;width:24px;height:24px;background:#fff;
  border-right:3px solid #111;border-bottom:3px solid #111;transform:translateX(-50%) rotate(45deg)}
.cta{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.btn{padding:14px 32px;border-radius:16px;text-decoration:none;font-weight:700;transition:.2s;display:inline-block;border:3px solid var(--ink)}
.btn.primary{background:#111;color:#fff;box-shadow:5px 5px 0 #8a8a8a}
.btn.primary:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 #8a8a8a}
.btn.ghost{background:#fff;color:#111;box-shadow:5px 5px 0 #111}
.btn.ghost:hover{transform:translate(-2px,-2px) rotate(1deg)}
.btn.big{font-size:1.2rem;padding:18px 44px}

/* mascot */
.hero-mascot{display:flex;justify-content:center;margin-top:36px}
.mascot-card{display:flex;align-items:center;gap:14px;background:#fff;border:3px solid #111;border-radius:18px;
  padding:12px 22px;box-shadow:var(--shadow);transform:rotate(1.5deg);position:relative}
.mascot-face{font-size:2rem;background:#111;color:#fff;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.mascot-text{display:flex;flex-direction:column;text-align:left}
.mascot-text span{color:var(--mid);font-size:.85rem;font-family:'Space Mono',monospace}
.mascot-dot{width:14px;height:14px;background:#111;border-radius:50%;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}

/* stats */
.stats{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.stat{background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:20px 28px;display:flex;flex-direction:column;gap:4px;min-width:150px;box-shadow:5px 5px 0 #111;position:relative}
.stat:nth-child(odd){transform:rotate(-1.5deg)}.stat:nth-child(even){transform:rotate(1.5deg)}
.stat b{font-size:1.7rem}
.stat span{color:var(--mid);font-size:.85rem;font-family:'Space Mono',monospace}
.stat i{position:absolute;top:-14px;right:-10px;font-style:normal;background:#111;color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #fff}

/* marquee */
.marquee{background:#111;color:#fff;overflow:hidden;white-space:nowrap;padding:12px 0;transform:rotate(-1deg);margin:40px -20px;border-top:3px solid #111;border-bottom:3px solid #111;position:relative;z-index:1}
.marquee-track{display:inline-flex;animation:scroll 22s linear infinite;font-weight:600;letter-spacing:2px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* sections */
section{max-width:1100px;margin:auto;padding:60px 20px;position:relative;z-index:1}
h2{font-size:2.4rem;text-align:center;margin-bottom:10px}
.sticker-title .scribble{display:inline-block;background:#111;color:#fff;font-size:1rem;padding:4px 14px;border-radius:99px;transform:rotate(3deg);vertical-align:middle;margin-left:8px}
.sticker-title .scribble.gray{background:#8a8a8a}
.center{text-align:center}
.dim{color:var(--mid);font-family:'Space Mono',monospace;font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:36px}
.card{background:var(--white);border:3px solid var(--ink);border-radius:20px;padding:26px;transition:.25s;box-shadow:5px 5px 0 #111;position:relative}
.card:nth-child(3n+1){transform:rotate(-.8deg)}.card:nth-child(3n+2){transform:rotate(.8deg)}
.card:hover{transform:translate(-3px,-3px) rotate(0deg)!important;box-shadow:9px 9px 0 #111}
.card .emoji{font-size:2.2rem;display:inline-block;background:var(--paper);border:3px solid #111;border-radius:14px;padding:4px 10px;margin-bottom:12px;box-shadow:3px 3px 0 #111}
.card h3{margin-bottom:10px;font-size:1.2rem}
.card p{color:var(--ink2);line-height:1.7;font-size:.95rem}
code{background:#111;color:#fff;padding:2px 8px;border-radius:8px;font-size:.82em;font-family:'Space Mono',monospace}
.table-wrap{overflow-x:auto;margin-top:30px;border:3px solid #111;border-radius:18px;background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:14px 18px;text-align:left;border-bottom:2px dashed #d9d9d9}
th{background:#111;color:#fff;font-family:'Space Mono',monospace}
td{color:var(--ink2)}
tr:nth-child(even) td{background:#f4f4f2}
.code{background:#111;color:#fff;border:3px solid #111;border-radius:18px;padding:0;margin-top:30px;overflow:hidden;box-shadow:8px 8px 0 #8a8a8a}
.code-dots{display:flex;gap:8px;padding:14px 18px;border-bottom:2px solid #333}
.code-dots span{width:14px;height:14px;border-radius:50%;background:#fff;display:block}
.code-dots span:nth-child(2){background:#8a8a8a}.code-dots span:nth-child(3){background:#d9d9d9}
.code pre{padding:24px;font-family:'Space Mono',monospace;line-height:2;color:#fff;overflow-x:auto}
footer{text-align:center;padding:40px;color:var(--ink2);border-top:3px dashed #111;margin-top:20px;font-family:'Space Mono',monospace;font-size:.85rem}
footer a{color:#111;font-weight:700}
@media(max-width:640px){.links a:not(.btn-sm){display:none}#nav{margin:12px}}