.blog-progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#00c8ff,#00ffaa);width:0%;z-index:9999;transition:width 0.1s ease-out;}.blog-container{max-width:1240px;margin:0 auto;padding:32px 20px 80px;}.blog-hero{background:linear-gradient(135deg,rgba(0,200,255,0.08) 0%,rgba(138,43,226,0.08) 100%);border:1px solid rgba(0,200,255,0.2);border-radius:20px;padding:36px;margin-bottom:48px;position:relative;overflow:hidden;backdrop-filter:blur(16px);box-shadow:0 16px 40px rgba(0,0,0,0.4);}.blog-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;}.blog-hero-badge{display:inline-flex;align-items:center;gap:6px;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 12px;border-radius:20px;background:rgba(241,196,15,0.15);color:#f1c40f;border:1px solid rgba(241,196,15,0.3);margin-bottom:16px;}.blog-hero-title{font-size:2.1rem;font-weight:800;line-height:1.25;color:#ffffff;margin:0 0 16px;text-decoration:none;display:block;transition:color 0.2s ease;}.blog-hero-title:hover{color:#00c8ff;}.blog-hero-summary{font-size:1.02rem;color:#94a3b8;line-height:1.6;margin:0 0 24px;}.blog-hero-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:0.85rem;color:#64748b;}.blog-hero-img-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.1);box-shadow:0 12px 30px rgba(0,0,0,0.5);aspect-ratio:16 / 10;}.blog-hero-img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}.blog-hero:hover .blog-hero-img{transform:scale(1.03);}.blog-nav-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:36px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.08);}.blog-cats-list{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0;}.blog-cat-pill{padding:6px 14px;border-radius:20px;font-size:0.84rem;font-weight:600;color:#94a3b8;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);text-decoration:none;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:6px;}.blog-cat-pill:hover,.blog-cat-pill.active{background:rgba(0,200,255,0.12);border-color:rgba(0,200,255,0.35);color:#00c8ff;}.blog-search-box{position:relative;min-width:260px;}.blog-search-box input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:20px;padding:8px 16px 8px 38px;color:#ffffff;font-size:0.88rem;outline:none;transition:border-color 0.2s ease;}.blog-search-box input:focus{border-color:#00c8ff;background:rgba(0,200,255,0.03);}.blog-search-box i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#64748b;font-size:0.85rem;}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px;margin-bottom:48px;}.blog-card{background:rgba(15,23,42,0.65);border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;backdrop-filter:blur(12px);text-decoration:none;color:inherit;}.blog-card:hover{transform:translateY(-5px);border-color:rgba(0,200,255,0.35);box-shadow:0 16px 36px rgba(0,0,0,0.5),0 0 20px rgba(0,200,255,0.1);}.blog-card-thumb-wrap{position:relative;width:100%;aspect-ratio:16 / 9;background:rgba(255,255,255,0.03);overflow:hidden;}.blog-card-thumb{width:100%;height:100%;object-fit:cover;transition:transform 0.35s ease;}.blog-card:hover .blog-card-thumb{transform:scale(1.05);}.blog-card-body{padding:22px;display:flex;flex-direction:column;flex:1;}.blog-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:0.78rem;color:#64748b;margin-bottom:12px;}.blog-cat-badge{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:3px 8px;border-radius:6px;background:rgba(59,130,246,0.12);color:#3b82f6;border:1px solid rgba(59,130,246,0.25);}.blog-card-title{font-size:1.15rem;font-weight:700;line-height:1.35;color:#ffffff;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.blog-card-summary{font-size:0.88rem;color:#94a3b8;line-height:1.5;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;}.blog-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);font-size:0.8rem;color:#64748b;}.blog-card-author{display:flex;align-items:center;gap:8px;}.blog-card-author img{width:24px;height:24px;border-radius:50%;}.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;}.article-main{min-width:0;}.article-header{margin-bottom:32px;}.article-breadcrumbs{display:flex;align-items:center;gap:8px;font-size:0.82rem;color:#64748b;margin-bottom:18px;}.article-breadcrumbs a{color:#94a3b8;text-decoration:none;transition:color 0.2s ease;}.article-breadcrumbs a:hover{color:#00c8ff;}.article-title{font-size:2.4rem;font-weight:800;line-height:1.22;color:#ffffff;margin:0 0 16px;letter-spacing:-0.5px;}.article-summary-lead{font-size:1.15rem;line-height:1.6;color:#cbd5e1;margin:0 0 24px;font-weight:400;}.article-author-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,0.08);border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.85rem;color:#94a3b8;}.article-author-info{display:flex;align-items:center;gap:12px;}.article-author-avatar{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,200,255,0.3);}.article-author-name{font-weight:700;color:#ffffff;display:block;}.article-share-btns{display:flex;align-items:center;gap:8px;}.article-share-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);color:#94a3b8;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:0.9rem;transition:all 0.2s ease;cursor:pointer;}.article-share-btn:hover{background:rgba(0,200,255,0.15);border-color:#00c8ff;color:#00c8ff;transform:translateY(-2px);}.article-cover-wrap{border-radius:16px;overflow:hidden;margin-bottom:36px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 16px 40px rgba(0,0,0,0.5);aspect-ratio:16 / 9;}.article-cover-img{width:100%;height:100%;object-fit:cover;}.article-content{font-size:1.05rem;line-height:1.8;color:#cbd5e1;word-break:break-word;}.article-content h1:first-child{display:none;}.article-content h1{font-size:1.8rem;font-weight:800;color:#ffffff;margin:44px 0 20px;letter-spacing:-0.02em;}.article-content h2{font-size:1.5rem;font-weight:800;color:#ffffff;margin:40px 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,0.1);letter-spacing:-0.01em;}.article-content h3{font-size:1.22rem;font-weight:700;color:#00c8ff;margin:30px 0 12px;}.article-content h4,.article-content h5,.article-content h6{font-size:1.05rem;font-weight:700;color:#f1f5f9;margin:24px 0 10px;}.article-content p{margin:0 0 22px;line-height:1.8;color:#cbd5e1;}.article-content a{color:#00c8ff;font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:all .2s;}.article-content a:hover{color:#38bdf8;text-shadow:0 0 10px rgba(0,200,255,0.4);}.article-content strong,.article-content b{color:#ffffff;font-weight:700;}.article-content em,.article-content i{color:#e2e8f0;}.article-content ul,.article-content ol{margin:0 0 26px;padding-left:26px;}.article-content li{margin-bottom:10px;line-height:1.75;color:#cbd5e1;}.article-content li strong{color:#ffffff;}.article-content blockquote{margin:30px 0;padding:16px 22px;border-left:4px solid #00c8ff;background:rgba(0,200,255,0.05);border-radius:0 12px 12px 0;color:#e2e8f0;font-style:italic;box-shadow:0 4px 16px rgba(0,0,0,0.2);}.article-content img{max-width:100%;height:auto;border-radius:14px;margin:28px 0;border:1px solid rgba(255,255,255,0.12);box-shadow:0 8px 30px rgba(0,0,0,0.35);}.article-content code{font-family:'JetBrains Mono','Fira Code',Consolas,monospace;font-size:0.88em;padding:3px 8px;border-radius:6px;background:rgba(0,200,255,0.1);color:#00c8ff;border:1px solid rgba(0,200,255,0.22);font-weight:500;}.article-content pre{background:#030a16 !important;border:1px solid rgba(0,200,255,0.2);border-radius:12px;padding:18px 22px;margin:26px 0;overflow-x:auto;box-shadow:0 8px 28px rgba(0,0,0,0.45);position:relative;}.article-content pre code{font-family:'JetBrains Mono','Fira Code',Consolas,monospace !important;font-size:0.9rem !important;line-height:1.65 !important;color:#e2e8f0 !important;background:transparent !important;border:none !important;padding:0 !important;}.blog-callout{padding:18px 22px;border-radius:12px;margin:28px 0;border-left:4px solid #00c8ff;background:rgba(0,200,255,0.05);}.blog-callout.tip{border-left-color:#22c55e;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.2);border-left-width:4px;}.blog-callout.warning{border-left-color:#f59e0b;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);border-left-width:4px;}.blog-callout p{margin:0 !important;color:#f1f5f9;}.blog-table-wrap{width:100%;overflow-x:auto;margin:28px 0;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(11,19,38,0.85);box-shadow:0 8px 24px rgba(0,0,0,0.35);}.article-content table{width:100%;border-collapse:collapse;font-size:0.92rem;text-align:left;}.article-content th{background:rgba(0,200,255,0.08);color:#00c8ff;font-weight:700;padding:14px 18px;border-bottom:2px solid rgba(0,200,255,0.2);text-transform:uppercase;font-size:0.78rem;letter-spacing:0.5px;}.article-content td{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.06);color:#e2e8f0;}.article-content tr:nth-child(even) td{background:rgba(255,255,255,0.02);}.article-content tr:last-child td{border-bottom:none;}.article-content tr:hover td{background:rgba(0,200,255,0.03);}.article-content hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);margin:36px 0;}.article-bio-card{background:rgba(15,23,42,0.7);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:24px;margin:48px 0;display:flex;gap:20px;align-items:center;}.article-bio-avatar{width:64px;height:64px;border-radius:50%;border:2px solid #00c8ff;}.blog-comments-wrap{margin-top:48px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.1);}.comment-card{background:rgba(15,23,42,0.5);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:18px;margin-bottom:16px;}@media (max-width:960px){.blog-hero-grid{grid-template-columns:1fr;}.article-layout{grid-template-columns:1fr;}.article-title{font-size:1.85rem;}}.code-card-wrapper{margin:28px 0;border-radius:12px;border:1px solid rgba(0,200,255,0.22);background:#030814;box-shadow:0 10px 30px rgba(0,0,0,0.5);overflow:hidden;}.code-card-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:#091326;border-bottom:1px solid rgba(255,255,255,0.08);font-size:0.75rem;}.code-card-lang{font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:700;color:#00c8ff;letter-spacing:0.8px;text-transform:uppercase;}.code-card-copy{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#94a3b8;font-size:0.72rem;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;}.code-card-copy:hover{background:rgba(0,200,255,0.15);color:#00c8ff;border-color:rgba(0,200,255,0.3);}.article-content .highlight{background:transparent !important;margin:0 !important;}.article-content pre{margin:0 !important;padding:16px 18px !important;background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;font-family:'JetBrains Mono','Fira Code',Consolas,monospace !important;font-size:0.88rem !important;line-height:1.65 !important;overflow-x:auto;}.article-content pre code{font-family:'JetBrains Mono','Fira Code',Consolas,monospace !important;color:#e2e8f0 !important;background:transparent !important;padding:0 !important;border:none !important;}.highlight .c,.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1,.highlight .cs{color:#64748b;font-style:italic;}.highlight .k,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:#f43f5e;font-weight:bold;}.highlight .o,.highlight .ow{color:#38bdf8;font-weight:bold;}.highlight .p{color:#94a3b8;}.highlight .s,.highlight .s1,.highlight .s2,.highlight .sa,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .ss{color:#34d399;}.highlight .m,.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .il,.highlight .mo{color:#fbbf24;}.highlight .na,.highlight .nt{color:#38bdf8;}.highlight .nb,.highlight .bp{color:#a78bfa;}.highlight .nc,.highlight .ne,.highlight .nf,.highlight .nn{color:#60a5fa;font-weight:bold;}.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi,.highlight .vm{color:#e2e8f0;}.highlight .w{color:#f8fafc;}