*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0d1117;--bg2:#161b22;--bg3:#1c2128;--text:#d1d5db;--text2:#8b949e;--heading:#f0f6fc;--accent:#58a6ff;--accent2:#1f6feb;--border:#21262d;--border2:#30363d;--max-w:820px;--green:#3fb950;--red:#f85149;--orange:#d29922}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.75;font-size:17px}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:#79c0ff;text-decoration:underline}
.skip-link{position:absolute;top:-40px;left:0;padding:8px;background:var(--accent2);color:#fff;z-index:100}
.skip-link:focus{top:0}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

.site-header{position:sticky;top:0;z-index:50;background:rgba(13,17,23,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.75rem 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.site-logo{font-size:1.3rem;font-weight:700;color:var(--heading);letter-spacing:-.02em}
.site-logo:hover{color:var(--accent);text-decoration:none}
.site-nav{display:flex;gap:.875rem;flex-wrap:wrap;font-size:.85rem}
.site-nav a{color:var(--text2);padding:.25rem 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent);text-decoration:none}

.site-footer{border-top:1px solid var(--border);padding:2.5rem 0;text-align:center;font-size:.8rem;color:var(--text2)}

.hero{text-align:center;padding:4rem 0 2.5rem}
.hero h1{font-size:2.75rem;color:var(--heading);margin-bottom:.5rem;letter-spacing:-.03em;font-weight:800}
.hero p{color:var(--text2);font-size:1.15rem;max-width:520px;margin:0 auto}

.breadcrumb{font-size:.8rem;color:var(--text2);padding:1.5rem 0 0;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text2)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{color:var(--border2)}

.section-header{padding:2rem 0 1rem}
.section-header h1{font-size:2rem;color:var(--heading);font-weight:700}
.section-desc{color:var(--text2);margin-top:.5rem;font-size:.95rem}

.hub-section{margin:2.5rem 0}
.hub-section h2{font-size:1.25rem;margin-bottom:1rem;color:var(--heading);font-weight:700}
.hub-section h2 a{color:var(--heading)}
.hub-section h2 a:hover{color:var(--accent);text-decoration:none}
.latest-articles{margin-bottom:1rem}
.latest-articles h2{font-size:1.25rem;margin-bottom:1rem;color:var(--heading);font-weight:700}

.article-list{display:flex;flex-direction:column;gap:.75rem}
.article-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:1.25rem 1.5rem;transition:border-color .2s,transform .15s}
.article-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.article-card h2,.article-card h3{font-size:1.05rem;line-height:1.45;font-weight:600}
.article-card h2 a,.article-card h3 a{color:var(--heading)}
.article-card h2 a:hover,.article-card h3 a:hover{color:var(--accent);text-decoration:none}
.article-meta{display:flex;align-items:center;gap:.75rem;font-size:.78rem;color:var(--text2);margin:.35rem 0}
.article-summary{font-size:.9rem;color:var(--text2);margin-top:.5rem;line-height:1.6}
.category-badge{display:inline-block;background:var(--accent2);color:#fff;padding:2px 9px;border-radius:12px;font-size:.72rem;font-weight:500;letter-spacing:.02em;transition:background .15s}
.category-badge:hover{background:var(--accent);text-decoration:none}
.reading-time{color:var(--text2)}

.article-header{padding:2rem 0 1rem}
.article-header h1{font-size:2.1rem;color:var(--heading);line-height:1.3;font-weight:700;letter-spacing:-.02em}

.article-body{padding:1rem 0 2rem}
.article-body h2{font-size:1.45rem;color:var(--heading);margin:2.25rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--border);font-weight:700}
.article-body h3{font-size:1.15rem;color:var(--heading);margin:1.75rem 0 .5rem;font-weight:600}
.article-body p{margin:.85rem 0}
.article-body ul,.article-body ol{margin:.85rem 0 .85rem 1.5rem}
.article-body li{margin:.3rem 0}
.article-body blockquote{border-left:3px solid var(--accent2);padding:.75rem 1rem;margin:1.25rem 0;color:var(--text2);background:var(--bg2);border-radius:0 8px 8px 0}
.article-body pre{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:1rem 1.25rem;overflow-x:auto;font-size:.84rem;margin:1.25rem 0}
.article-body code{font-family:"SF Mono","Fira Code","Cascadia Code",monospace;font-size:.84em}
.article-body p code{background:var(--bg3);padding:2px 7px;border-radius:5px;font-size:.82em}
.article-body img{max-width:100%;height:auto;border-radius:8px}
.article-body table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.92rem}
.article-body th,.article-body td{border:1px solid var(--border);padding:.55rem .75rem;text-align:left}
.article-body th{background:var(--bg2);color:var(--heading);font-weight:600}
.article-body a{text-decoration:underline;text-decoration-color:var(--border2);text-underline-offset:2px}
.article-body a:hover{text-decoration-color:var(--accent)}

.article-tags{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.5rem 0;padding-top:1.5rem;border-top:1px solid var(--border)}
.tag{display:inline-block;background:var(--bg2);border:1px solid var(--border);padding:4px 12px;border-radius:20px;font-size:.8rem;color:var(--text2);transition:border-color .15s,color .15s}
.tag:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.tag-count{font-size:.7rem;opacity:.6;margin-left:2px}

.tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem 0}
.tag-size-1{font-size:.8rem}
.tag-size-2{font-size:.95rem}
.tag-size-3{font-size:1.1rem}
.tag-size-4{font-size:1.25rem}
.tag-size-5{font-size:1.4rem;font-weight:600}

.related-posts{border-top:1px solid var(--border);padding:2rem 0;margin-top:1rem}
.related-posts h2{font-size:1.15rem;color:var(--heading);margin-bottom:1rem;font-weight:700}
.related-posts ul{list-style:none}
.related-posts li{padding:.6rem 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.related-posts li:last-child{border-bottom:none}
.related-posts time{font-size:.78rem;color:var(--text2);white-space:nowrap}

.pagination{display:flex;justify-content:center;align-items:center;gap:.35rem;padding:2.5rem 0 1rem}
.pagination a,.pagination span{padding:.45rem .9rem;border:1px solid var(--border);border-radius:6px;font-size:.85rem;color:var(--text2);transition:border-color .15s,color .15s,background .15s}
.pagination a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pagination .active{background:var(--accent2);border-color:var(--accent2);color:#fff}

@media(max-width:768px){
.header-inner{flex-direction:column;text-align:center}
.site-nav{justify-content:center}
.hero h1{font-size:1.85rem}
.hero p{font-size:1rem}
.article-header h1{font-size:1.5rem}
.article-card{padding:1rem 1.15rem}
.related-posts li{flex-direction:column;align-items:flex-start;gap:.2rem}
.breadcrumb{font-size:.75rem}
}