:root { color-scheme: dark; --bg:#000; --card:#111; --text:#fff; --muted:#aaa; --border:rgba(255,255,255,.08); --hover:rgba(255,255,255,.18); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:radial-gradient(circle at 50% 25%, #111 0, #000 48rem); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
button,select { font:inherit; }
.skip-link { position:fixed; left:-9999px; top:1rem; z-index:10; padding:.7rem 1rem; border-radius:10px; background:#fff; color:#000; }
.skip-link:focus { left:1rem; }
.memes-nav { min-height:70px; padding:0 32px; border-bottom:1px solid var(--border); background:#000; display:flex; align-items:center; gap:28px; }
.memes-brand { flex:none; font-size:1.25rem; font-weight:800; letter-spacing:-.04em; text-decoration:none; white-space:nowrap; }
.memes-nav-links { display:flex; align-items:stretch; justify-content:center; gap:30px; flex:1; height:70px; }
.memes-nav-links a { position:relative; display:flex; align-items:center; color:#f5f5f5; font-size:.875rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.memes-nav-links a::after { content:""; position:absolute; right:0; bottom:4px; left:0; height:2px; border-radius:2px; background:#fff; opacity:0; transform:scaleX(.4); transition:opacity 200ms ease,transform 200ms ease; }
.memes-nav-links a:hover::after,.memes-nav-links a.is-active::after { opacity:1; transform:scaleX(1); }
.memes-search { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:9px; padding:7px 10px; background:transparent; color:#fff; }
.memes-search span { font-size:1.7rem; line-height:.7; transform:rotate(-20deg); }
.memes-search kbd { border:1px solid var(--border); border-radius:6px; padding:3px 8px; color:#bbb; font-size:.75rem; white-space:nowrap; }
.memes-avatar { display:grid; width:40px; height:40px; flex:none; place-items:center; border-radius:50%; background:#242424; font-weight:700; text-decoration:none; }
.memes-shell { width:min(1424px,calc(100% - 112px)); margin:0 auto; padding:40px 0 26px; }
.memes-hero { padding:0 8px 38px; }
.memes-hero h1 { margin:0 0 4px; font-size:clamp(3rem,5vw,4rem); letter-spacing:-.055em; line-height:1.1; }
.memes-hero p { margin:0; color:#aaa; font-size:1.05rem; line-height:1.9; }
.memes-hero .memes-quote { color:#bbb; font-size:.98rem; }
.memes-toolbar { display:flex; align-items:center; gap:18px; min-height:70px; padding:13px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(17,17,17,.55); }
.filter-list { display:flex; align-items:center; gap:12px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.filter-list::-webkit-scrollbar { display:none; }
.filter-pill,.sort-control select { flex:none; border:1px solid var(--border); border-radius:999px; padding:10px 17px; background:transparent; color:#fff; font-size:.875rem; font-weight:600; white-space:nowrap; cursor:pointer; transition:background 200ms ease,border-color 200ms ease,color 200ms ease; }
.filter-pill:hover,.filter-pill:focus-visible { border-color:var(--hover); background:rgba(255,255,255,.04); }
.filter-pill.is-selected { border-color:#fff; background:#fff; color:#000; }
.sort-control { margin-left:auto; }
.sort-control select { appearance:auto; min-width:140px; border-radius:9px; padding:10px 13px; background:#050505; cursor:pointer; }
.memes-status { margin:25px 8px 0; color:#888; font-size:.85rem; }
.meme-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:10px; align-items:start; }
.meme-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--card); box-shadow:0 8px 24px rgba(0,0,0,.18); transition:transform 200ms ease,border-color 200ms ease,box-shadow 200ms ease; }
.meme-card:hover,.meme-card:focus-within { transform:translateY(-6px); border-color:var(--hover); box-shadow:0 16px 34px rgba(0,0,0,.38); }
.meme-media { position:relative; overflow:hidden; background:linear-gradient(110deg,#151515 8%,#252525 18%,#151515 33%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.meme-media img { display:block; width:100%; height:auto; opacity:0; transform:scale(1); transition:opacity 300ms ease,transform 200ms ease; }
.meme-media img.is-loaded { opacity:1; }
.meme-card:hover .meme-media img { transform:scale(1.01); }
.meme-meta { display:flex; align-items:center; gap:14px; min-height:48px; padding:0 16px; border-top:1px solid var(--border); color:#ddd; font-size:.8rem; }
.meme-category { margin-right:auto; color:#64b5ff; font-weight:600; }
.meme-stat { display:inline-flex; align-items:center; gap:5px; }
.meme-share { color:#ccc; font-size:1rem; }
.meme-date { padding:0 16px 14px; color:#777; font-size:.75rem; }
.memes-footer-banner { display:flex; align-items:center; justify-content:center; gap:12px; width:max-content; max-width:100%; margin:22px auto 0; padding:14px 22px; border:1px solid var(--border); border-radius:12px; color:#aaa; font-size:.9rem; }
.memes-footer-banner span:first-child { color:#ccc; font-size:1.2rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes shimmer { to { background-position:-200% 0; } }
@media (max-width:1150px) { .memes-nav-links { gap:16px; } .memes-nav { gap:18px; padding:0 20px; } .memes-shell { width:min(100% - 48px,1424px); } }
@media (max-width:850px) { .memes-nav-links { display:none; } .memes-brand { margin-right:auto; } .memes-shell { width:calc(100% - 32px); padding-top:30px; } .meme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .memes-toolbar { align-items:stretch; flex-direction:column; } .sort-control { margin-left:0; } .sort-control select { width:100%; } }
@media (max-width:520px) { .memes-nav { min-height:62px; } .memes-search { display:none; } .memes-nav-links { height:62px; } .memes-hero { padding-bottom:28px; } .memes-hero h1 { font-size:3rem; } .memes-hero p { font-size:.92rem; line-height:1.7; } .meme-grid { grid-template-columns:1fr; gap:18px; } .memes-footer-banner { align-items:flex-start; font-size:.8rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }