:root {
  --bg: #000; --surface: #0d0d11; --surface-2: #15151b; --border: #232329;
  --text: #fff; --muted: #8b8b96; --muted-2: #5d5d68;
  --blue: #3b7bff; --pink: #ff4d8d;
  --grad: linear-gradient(100deg, var(--blue), var(--pink));
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; }
.bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60vw 60vw at 15% -10%, rgba(59,123,255,.14), transparent 60%),
              radial-gradient(50vw 50vw at 100% 0%, rgba(255,77,141,.12), transparent 55%); }
.topbar { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--text); }
.brand-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); align-self: center; box-shadow: 0 0 18px rgba(255,77,141,.6); }
.brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.brand-by { color: var(--muted-2); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 24px 32px 80px; }
.hero { font-size: clamp(34px, 6vw, 56px); font-weight: 800; letter-spacing: -.03em; margin: 12px 0 8px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); font-size: 16px; margin: 0 0 32px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s; }
.tile:hover { transform: translateY(-3px); border-color: var(--pink); }
.thumb { aspect-ratio: 16/10; background: var(--surface-2) center/cover no-repeat; }
.tile-body { padding: 14px 16px; }
.tile-title { font-weight: 700; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-date { color: var(--muted-2); font-size: 12px; margin-top: 4px; }
.empty { color: var(--muted); text-align: center; padding: 80px 0; font-size: 16px; }
.hidden { display: none !important; }