.blog-layout{background:#0a0a14;align-items:flex-start;gap:40px;max-width:1200px;margin:0 auto;padding:40px 5% 60px;display:flex}.blog-article{color:#cbd5e1;text-align:left;flex:1;min-width:0;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.85}.blog-article .article-cover{-o-object-fit:cover;object-fit:cover;border:1px solid #1e1e3a;border-radius:12px;width:100%;max-height:450px;margin-bottom:28px}.blog-article .article-meta{color:#94a3b8;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px;font-size:13px;display:flex}.blog-article .article-meta .category{color:#a78bfa;letter-spacing:.05em;text-transform:uppercase;background:#7c3aed26;border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600}.blog-article .article-meta .separator{color:#475569}.blog-article h1{color:#fff;letter-spacing:-.02em;text-align:left;margin-bottom:16px;font-size:2.2em;font-weight:800;line-height:1.2}.blog-article h2{color:#f1f5f9;text-align:left;border-bottom:2px solid #7c3aed4d;margin-top:44px;margin-bottom:16px;padding-bottom:10px;font-size:1.6em;font-weight:700}.blog-article h3{color:#c4b5fd;text-align:left;margin-top:32px;margin-bottom:12px;font-size:1.25em;font-weight:700}.blog-article h4{color:#e2e8f0;text-align:left;margin-top:24px;margin-bottom:8px;font-size:1.05em;font-weight:600}.blog-article p{color:#cbd5e1;text-align:left;margin-bottom:18px}.blog-article strong{color:#f1f5f9;font-weight:700}.blog-article em{color:#a78bfa;font-style:italic}.blog-article a{color:#a78bfa;text-underline-offset:3px;text-decoration:underline}.blog-article a:hover{color:#c4b5fd}.blog-article ul,.blog-article ol{text-align:left;margin-bottom:18px;padding-left:24px}.blog-article li{color:#cbd5e1;margin-bottom:6px}.blog-article li::marker{color:#7c3aed}.blog-article blockquote{color:#c4b5fd;background:#7c3aed0f;border-left:4px solid #7c3aed;border-radius:0 10px 10px 0;margin:24px 0;padding:16px 20px;font-style:italic}.blog-article blockquote p{color:#c4b5fd;margin-bottom:0}.blog-article p img{border-radius:10px;max-width:100%;height:auto;margin:20px 0}.blog-article code{color:#c4b5fd;background:#7c3aed26;border-radius:5px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:.9em}.blog-article pre{background:#0f0f1a;border:1px solid #1e1e3a;border-radius:10px;margin:22px 0;padding:18px 22px;font-size:14px;line-height:1.6;overflow-x:auto}.blog-article pre code{color:#e2e8f0;background:0 0;padding:0}.blog-article table{border-collapse:collapse;border:1px solid #1e1e3a;border-radius:10px;width:100%;margin:22px 0;overflow:hidden}.blog-article th{text-align:left;color:#c4b5fd;text-transform:uppercase;letter-spacing:.05em;background:#0f0f1a;padding:12px 14px;font-size:13px;font-weight:700}.blog-article td{color:#cbd5e1;border-top:1px solid #1e1e3a;padding:10px 14px;font-size:14px}.blog-article hr{background:linear-gradient(90deg,#0000,#7c3aed,#0000);border:none;height:1px;margin:40px 0}.blog-sidebar{flex-shrink:0;width:300px;position:sticky;top:20px}.sidebar-title{color:#f1f5f9;text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid #7c3aed4d;margin-bottom:16px;padding-bottom:10px;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:700}.sidebar-card{background:#111;border:1px solid #1e1e3a;border-radius:10px;gap:12px;margin-bottom:10px;padding:12px;text-decoration:none;transition:border-color .2s;display:flex}.sidebar-card:hover{border-color:#7c3aed80}.sidebar-image{-o-object-fit:cover;object-fit:cover;border-radius:8px;flex-shrink:0;width:60px;height:60px}.sidebar-info{min-width:0}.sidebar-category{color:#a78bfa;text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600}.sidebar-post-title{color:#e2e8f0;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;font-size:13px;font-weight:600;line-height:1.4;display:-webkit-box;overflow:hidden}@media (max-width:900px){.blog-layout{flex-direction:column}.blog-sidebar{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;width:100%;display:grid;position:static}.sidebar-title{grid-column:1/-1}.sidebar-card{flex-direction:column}.sidebar-image{width:100%;height:100px}}@media (max-width:640px){.blog-article{padding:20px 0 40px;font-size:15px}.blog-article h1{font-size:1.6em}.blog-article h2{font-size:1.3em}.blog-article h3{font-size:1.1em}}
