:root{--bg:#06040e;--card:rgba(12,4,24,.85);--border:rgba(139,92,246,.08);--border2:rgba(139,92,246,.12);--text:#e8e0f0;--muted:#6a5a80;--magenta:#d946ef;--violet:#8b5cf6;--purple:#9b30f0;--r:12px;--font-main:'Inter',sans-serif;--font-deco:'Cinzel Decorative',serif;--glow:0 4px 30px rgba(139,92,246,.08)}
*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239b30f0' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");color:var(--text);font-family:var(--font-main);min-height:100vh;overflow-x:hidden}
a{color:var(--violet);text-decoration:none}a:hover{color:var(--magenta)}
header{background:rgba(6,4,14,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);box-shadow:0 4px 30px rgba(0,0,0,.3);padding:10px 16px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--font-deco);font-size:18px;color:var(--text);letter-spacing:1.5px}.logo span{color:var(--magenta)}
.back-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted);padding:5px 12px;border-radius:8px;font-size:12px}
.container{max-width:800px;margin:0 auto;padding:20px 16px}
.blog-header{text-align:center;margin:30px 0}.blog-header h1{font-family:var(--font-deco);font-size:28px;color:var(--magenta);margin-bottom:8px}
.blog-header p{color:var(--muted);font-size:14px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:20px}
.post-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .2s}
.post-card:hover{transform:translateY(-3px)}
.post-card-thumb{aspect-ratio:16/9;background:#0d0820;overflow:hidden}
.post-card-thumb img{width:100%;height:100%;object-fit:cover}
.post-card-body{padding:14px}
.post-card-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px;line-height:1.4}
.post-card-excerpt{font-size:12px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-meta{font-size:10px;color:var(--muted);margin-top:8px;display:flex;justify-content:space-between}
.post-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.post-tag{font-size:10px;padding:2px 8px;background:rgba(139,92,246,.1);border-radius:4px;color:var(--violet)}
/* Article */
.article{max-width:700px;margin:30px auto;padding:0 16px}
.article h1{font-family:var(--font-deco);font-size:26px;color:var(--magenta);margin-bottom:12px;line-height:1.3}
.article-meta{font-size:12px;color:var(--muted);margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.article-thumb{width:100%;border-radius:var(--r);margin-bottom:20px;aspect-ratio:16/9;object-fit:cover}
.article-body{font-size:14px;line-height:1.8;color:var(--text)}
.article-body h2{font-family:var(--font-deco);color:var(--magenta);font-size:18px;margin:24px 0 12px}
.article-body h3{color:var(--violet);font-size:15px;margin:18px 0 8px}
.article-body p{margin-bottom:14px}
.article-body ul,.article-body ol{margin:0 0 14px 20px;color:var(--muted)}
.article-body a{color:var(--violet)}
.article-body blockquote{border-left:3px solid var(--purple);padding:10px 16px;margin:14px 0;color:var(--muted);font-style:italic;background:rgba(139,92,246,.04);border-radius:0 8px 8px 0}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}.article h1{font-size:20px}.article-body{font-size:13px}header{padding:8px 12px}.logo{font-size:15px}.container{padding:14px 10px}}