:root{--mint:#7ee8c2;--mint2:#c9f7e6;--ink:#111;--white:#fff;
--font:"Fredoka","Baloo 2","Nunito","Varela Round","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--mint);color:var(--ink);line-height:1.5}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;max-width:1000px;margin:auto}
.brand{font-weight:800;font-size:1.5rem}
.pill{background:var(--ink);color:var(--white);text-decoration:none;padding:.45rem .9rem;border-radius:999px;font-weight:700;font-size:.9rem}
main{max-width:1000px;margin:auto;padding:0 1.25rem 2rem}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:1rem 0 2rem}
.ghost{width:100%;height:auto;border-radius:32px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){.ghost{animation:none}}
h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.05;margin:0 0 .5rem;font-weight:800}
.ticker{display:inline-block;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:.2rem 1rem;font-weight:800;font-size:1.3rem;margin:0}
.sub{font-size:1.25rem;margin:.8rem 0 1.4rem}
.buttons{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:999px;border:3px solid var(--ink);background:var(--white);color:var(--ink);text-decoration:none;font-weight:800;box-shadow:4px 4px 0 var(--ink);transition:transform .1s}
.btn:hover{transform:translate(-2px,-2px)}
.btn.dark{background:var(--ink);color:var(--white)}
.btn[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.card{background:var(--white);border:4px solid var(--ink);border-radius:28px;padding:1.5rem;margin:1.5rem 0;box-shadow:6px 6px 0 var(--ink)}
h2{margin:0 0 .6rem;font-size:1.6rem}
.lore p{font-size:1.2rem;margin:.3rem 0}.boo{opacity:.6}
.ca{display:flex;gap:.6rem;align-items:center;background:var(--mint2);border-radius:18px;padding:.6rem .6rem .6rem 1rem}
.ca code{flex:1;overflow-wrap:anywhere;font-size:1rem}
.ca button{font:inherit;font-weight:800;border:3px solid var(--ink);background:var(--ink);color:var(--white);border-radius:999px;padding:.5rem 1.1rem;cursor:pointer}
.vibes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}
.vibes div{background:var(--ink);color:var(--white);border-radius:24px;padding:1.2rem;text-align:center;font-weight:800;font-size:1.2rem}
.vibes span{display:block;font-size:2rem}
footer{background:var(--ink);color:#ddd;text-align:center;padding:1.5rem 1.25rem;font-size:.85rem}
footer p{max-width:700px;margin:.4rem auto}
@media (max-width:720px){.hero{grid-template-columns:1fr;text-align:center}.ghost{max-width:340px;margin:auto}.buttons{justify-content:center}.vibes{grid-template-columns:1fr}}