:root{--mid:#140B2E;--cg:#3CFF8F;--hp:#FF5FA2;--cgold:#FFC83D;--teal:#2EE6D6;--ink2:#0A0518;--hd:"Bangers",Impact,system-ui,sans-serif}
.memes-page h1,.memes-page h2,.memes-page h3{font-family:var(--hd);letter-spacing:1px}
.memes-page{background-color:var(--mid);background-image:radial-gradient(#ffffff10 1.5px,transparent 1.6px);background-size:14px 14px}
.mm-hero h1{font-size:clamp(2.4rem,11vw,5.6rem);text-shadow:4px 4px 0 var(--ink2);margin-bottom:.3em}
.mm-hero{padding-bottom:24px}
.mm-jump{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.mm-chips{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.mm-chip{font:400 1.15rem var(--hd);letter-spacing:1px;padding:8px 16px;min-height:44px;border:3px solid var(--ink2);border-radius:999px;background:var(--mid);color:#F4EEFF;box-shadow:3px 3px 0 var(--ink2);cursor:pointer}
.mm-chip:nth-child(2){border-color:var(--teal)}.mm-chip:nth-child(3){border-color:var(--hp)}.mm-chip:nth-child(4){border-color:var(--cgold)}
.mm-chip[aria-pressed="true"]{background:var(--cg);color:var(--ink2);border-color:var(--ink2);transform:rotate(-2deg)}
.mm-count{color:#B9A9E0;font-size:.9rem;margin:6px 0 0}
.mm-wall{columns:2 140px;column-gap:12px;margin-top:18px}
@media(min-width:768px){.mm-wall{columns:3}}@media(min-width:1200px){.mm-wall{columns:4}}
.mm-item{display:block;width:100%;padding:0;margin:0 0 12px;break-inside:avoid;border:4px solid var(--ink2);border-radius:14px;overflow:hidden;background:#1E1245;cursor:zoom-in;box-shadow:5px 5px 0 var(--ink2);transition:transform .2s}
.mm-item:nth-child(3n){transform:rotate(1.2deg)}.mm-item:nth-child(4n){transform:rotate(-1.2deg)}
.mm-item:hover,.mm-item:focus-visible{transform:scale(1.03) rotate(-1deg)}
.mm-item[hidden]{display:none}
.mm-item img{width:100%;height:auto}
.mm-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#0A0518f0;padding:60px 12px 20px}
.mm-lb[hidden]{display:none}
.mm-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}
.mm-lb-fig img{max-height:72vh;width:auto;max-width:100%;border:4px solid var(--cg);border-radius:14px;box-shadow:6px 6px 0 var(--ink2)}
.mm-lb button{position:absolute;background:#1E1245;color:#F4EEFF;border:3px solid var(--cg);border-radius:50%;width:48px;height:48px;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:3px 3px 0 var(--ink2)}
.mm-lb-close{top:10px;right:10px}.mm-lb-prev{left:8px;top:50%;transform:translateY(-50%)}.mm-lb-next{right:8px;top:50%;transform:translateY(-50%)}
.mm-maker{display:grid;gap:24px;margin-top:24px;align-items:start}
@media(min-width:900px){.mm-maker{grid-template-columns:minmax(0,1.2fr) 1fr}}
.mm-stage{max-width:640px;width:100%}
.mm-stage canvas{display:block;width:100%;height:auto;background:#1E1245}
.mm-controls{display:grid;gap:8px}
.mm-controls label{font:400 1.3rem var(--hd);letter-spacing:1px;color:var(--teal)}
.mm-controls input{font:500 1rem "Space Grotesk",system-ui,sans-serif;padding:12px 14px;border:3px solid var(--ink2);border-radius:12px;background:#F4EEFF;color:var(--ink2);box-shadow:3px 3px 0 var(--ink2);width:100%;min-width:0}
.mm-controls .btn{margin-top:12px;justify-self:start}
.mm-hint{color:#B9A9E0;font-size:.9rem;margin:6px 0 0}
.mm-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;margin-top:14px}
.mm-tpl{padding:0;border:3px solid var(--ink2);border-radius:10px;overflow:hidden;background:#1E1245;cursor:pointer;aspect-ratio:1;box-shadow:3px 3px 0 var(--ink2)}
.mm-tpl img{width:100%;height:100%;object-fit:cover}
.mm-tpl[aria-selected="true"]{border-color:var(--cg);outline:3px solid var(--cg);outline-offset:1px}
.mm-tpl[hidden]{display:none}
.mm-pack{margin:0;padding-bottom:16px;text-align:center}
.mm-pack figcaption{margin-top:14px}
.mm-cta{text-align:center;background:var(--hp);color:var(--ink2);border:5px solid var(--ink2);border-radius:24px;box-shadow:8px 8px 0 var(--ink2);margin:32px 16px 64px;padding:40px 20px;max-width:900px;transform:rotate(-1deg)}
@media(min-width:940px){.mm-cta{margin:32px auto 96px}}
.mm-cta h2{color:var(--ink2);text-shadow:3px 3px 0 #F4EEFF}.mm-cta h2 .g{color:var(--cg);text-shadow:3px 3px 0 var(--ink2)}
.mm-cta .lead{color:var(--ink2);margin:0 auto 18px;font-weight:700}.mm-cta .mm-hint{color:var(--ink2)}
.mm-cta-btn{font-family:var(--hd);font-size:1.5rem}
@media(prefers-reduced-motion:reduce){.mm-item,.mm-item:hover,.mm-chip[aria-pressed="true"]{transition:none;transform:none}}