:root{
  --bg:#0a0a12; --fg:#f4f4fb; --muted:#a5a5c0;
  --accent:#8b5cf6; --accent2:#ec4899; --accent3:#38bdf8;
  --card:rgba(255,255,255,.045); --card-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--fg);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fg)}
::selection{background:var(--accent);color:#fff}

/* Фон */
.bg-gradient{
  position:fixed;inset:0;z-index:0;
  background:radial-gradient(circle at 18% 15%,rgba(139,92,246,.28),transparent 42%),
             radial-gradient(circle at 82% 55%,rgba(236,72,153,.22),transparent 46%),
             radial-gradient(circle at 55% 90%,rgba(56,189,248,.16),transparent 45%),
             var(--bg);
}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.blobs{position:fixed;inset:0;z-index:0;overflow:hidden}
.blobs span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;
  animation:float 20s ease-in-out infinite}
.blobs span:nth-child(1){width:360px;height:360px;background:var(--accent);top:-90px;left:-70px}
.blobs span:nth-child(2){width:320px;height:320px;background:var(--accent2);bottom:-70px;right:-50px;animation-delay:-7s}
.blobs span:nth-child(3){width:280px;height:280px;background:var(--accent3);top:38%;left:58%;animation-delay:-13s}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-46px) scale(1.12)}}

/* Hero */
.hero{position:relative;z-index:2;text-align:center;padding:80px 20px 40px}
.badge{display:inline-block;padding:7px 16px;border-radius:999px;font-size:.8rem;
  letter-spacing:.5px;background:var(--card);border:1px solid var(--border);
  color:var(--muted);margin-bottom:26px;animation:fadeUp .7s ease both}
.title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.6rem,7vw,5rem);
  font-weight:700;letter-spacing:-2px;line-height:1.02;animation:fadeUp .8s ease both}
.title span{background:linear-gradient(90deg,var(--accent),var(--accent2) 55%,var(--accent3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.subtitle{margin-top:16px;color:var(--muted);font-size:1.08rem;animation:fadeUp 1s .1s ease both}
.stats{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  animation:fadeUp 1s .2s ease both}
.stats .pill{padding:8px 16px;border-radius:12px;background:var(--card);
  border:1px solid var(--border);font-size:.86rem;color:var(--muted)}
.stats .pill b{color:var(--fg)}

main{position:relative;z-index:2;max-width:1160px;margin:0 auto;padding:0 24px 90px}

/* Тулбар / поиск */
.toolbar{display:flex;justify-content:center;margin:14px 0 44px}
.search-wrap{position:relative;width:min(560px,100%)}
.search-ico{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
#search{width:100%;padding:16px 46px 16px 50px;border-radius:16px;
  background:var(--card);border:1px solid var(--border);color:var(--fg);
  font-size:1rem;font-family:inherit;outline:none;transition:.25s}
#search::placeholder{color:var(--muted)}
#search:focus{border-color:var(--accent);background:var(--card-hover);
  box-shadow:0 0 0 4px rgba(139,92,246,.16)}
.clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
  background:var(--card-hover);color:var(--muted);font-size:.85rem;transition:.2s}
.clear:hover{color:var(--fg);background:rgba(255,255,255,.14)}

/* Сетка */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

.card{
  position:relative;padding:26px;border-radius:22px;
  background:var(--card);border:1px solid var(--border);
  cursor:pointer;overflow:hidden;text-decoration:none;color:var(--fg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s;
  transform-style:preserve-3d;animation:fadeUp .6s ease both;
}
.card::before{content:"";position:absolute;inset:0;opacity:0;transition:.35s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(139,92,246,.22),transparent 60%)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(139,92,246,.6),rgba(236,72,153,.4),transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.35s}
.card:hover{border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card:hover::before,.card:hover::after{opacity:1}
.card .emoji{font-size:2.4rem;margin-bottom:16px;display:block;position:relative;
  transition:transform .35s}
.card:hover .emoji{transform:scale(1.15) rotate(-6deg)}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;margin-bottom:6px;position:relative}
.card .author{color:var(--muted);font-size:.9rem;position:relative}
.card .tags{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap;position:relative}
.card .tag{font-size:.72rem;padding:4px 10px;border-radius:8px;
  background:rgba(139,92,246,.14);color:#c8b6ff;border:1px solid rgba(139,92,246,.2)}
.card .play{margin-top:18px;display:inline-flex;align-items:center;gap:6px;
  font-size:.86rem;font-weight:700;color:var(--accent);position:relative;
  opacity:.55;transform:translateX(0);transition:.3s}
.card:hover .play{opacity:1;transform:translateX(4px)}
mark{background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

.btn{padding:9px 16px;border-radius:11px;background:var(--card);
  border:1px solid var(--border);text-decoration:none;transition:.2s;font-size:.9rem}
.btn:hover{border-color:var(--accent);background:rgba(139,92,246,.14)}

.empty{text-align:center;color:var(--muted);margin-top:70px;font-size:1.1rem}
.hidden{display:none}

/* Скелетоны загрузки */
.skeleton{height:190px;border-radius:22px;background:var(--card);
  border:1px solid var(--border);position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  animation:sweep 1.3s infinite}
@keyframes sweep{to{transform:translateX(200%)}}

footer{position:relative;z-index:2;text-align:center;padding:34px;color:var(--muted);font-size:.85rem}
.heart{color:var(--accent2);display:inline-block;animation:beat 1.4s infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media(max-width:600px){.hero{padding:56px 18px 30px}.title{letter-spacing:-1px}}