@import "variables.css";*{box-sizing:border-box}body{font-family:var(--font-family-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--bg-primary);margin:0;padding:0}.container{max-width:var(--container-md);margin:0 auto;padding:0 var(--space-4)}.articles-grid{margin:var(--space-8)0;display:grid;grid-template-columns:1fr;gap:var(--space-6)}@media(min-width:768px){.articles-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-8)}}.article-card{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-6);margin-bottom:var(--space-6);transition:border-color var(--transition-fast)}.article-card:hover{border-color:var(--border-medium)}.article-card h3{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--font-semibold)}.article-card h3 a{color:var(--text-primary);text-decoration:none;transition:color var(--transition-fast)}.article-card h3 a:hover{color:var(--text-secondary)}.article-card time{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-3);display:block}.article-card p{color:var(--text-secondary);margin:0;line-height:var(--leading-relaxed)}article{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-8);margin:var(--space-8)auto;max-width:var(--container-md)}.article-header{margin-bottom:var(--space-8);text-align:center;border-bottom:1px solid var(--border-light);padding-bottom:var(--space-6)}.article-header h1{margin:0 0 var(--space-4);font-size:var(--text-3xl);font-weight:var(--font-bold);color:var(--text-primary)}.article-meta{color:var(--text-muted);font-size:var(--text-sm);display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.article-content{color:var(--text-secondary);line-height:var(--leading-relaxed)}.article-content h2,.article-content h3,.article-content h4{margin-top:var(--space-8);margin-bottom:var(--space-4);color:var(--text-primary);font-weight:var(--font-semibold)}.article-content h2{font-size:var(--text-2xl);border-bottom:1px solid var(--border-light);padding-bottom:var(--space-2)}.article-content h3{font-size:var(--text-xl)}.article-content h4{font-size:var(--text-lg)}.article-content p{margin-bottom:var(--space-4)}.article-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--space-6)0;border:1px solid var(--border-light)}.article-content pre{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-6)0;overflow-x:auto;font-family:var(--font-family-mono);font-size:var(--text-sm)}.article-content code{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:var(--space-1)var(--space-2);font-family:var(--font-family-mono);font-size:var(--text-sm)}.article-content pre code{background:0 0;border:none;padding:0}.article-content blockquote{margin:var(--space-6)0;padding:var(--space-4)var(--space-6);background:var(--bg-secondary);border-left:4px solid var(--text-primary);border-radius:var(--radius-md);font-style:italic}.article-content table{width:100%;border-collapse:collapse;margin:var(--space-6)0;border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden}.article-content th,.article-content td{padding:var(--space-3);text-align:left;border-bottom:1px solid var(--border-light)}.article-content th{background:var(--bg-secondary);font-weight:var(--font-semibold)}.article-content ul,.article-content ol{margin:var(--space-4)0;padding-left:var(--space-6)}.article-content li{margin-bottom:var(--space-2)}.tag-list{list-style:none;padding:0;margin:var(--space-6)0}.tag-list li{margin-bottom:var(--space-2)}.tag-list a{color:var(--text-secondary);text-decoration:none;font-size:var(--text-base);padding:var(--space-2)0;display:inline-block;border-bottom:1px dotted var(--border-light);transition:color var(--transition-fast)}.tag-list a:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}.tag-count{color:var(--text-muted);font-size:var(--text-sm);margin-left:var(--space-2)}.article-tags{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-light)}.article-tags a{display:inline-block;color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);margin-right:var(--space-3);margin-bottom:var(--space-2);padding:var(--space-1)0;border-bottom:1px dotted var(--border-light);transition:color var(--transition-fast)}.article-tags a:hover{color:var(--text-primary)}.main-nav{background:var(--bg-primary);border-bottom:1px solid var(--border-light);padding:var(--space-4)0}.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-6);justify-content:center}.nav-list a{color:var(--text-secondary);text-decoration:none;font-weight:var(--font-medium);transition:color var(--transition-fast)}.nav-list a:hover,.nav-list a.active{color:var(--text-primary)}.pagination{display:flex;justify-content:center;gap:var(--space-2);margin:var(--space-8)0;list-style:none;padding:0}.pagination a,.pagination span{padding:var(--space-2)var(--space-3);color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast);font-size:var(--text-sm);min-width:32px;text-align:center}.pagination a:hover{color:var(--text-primary)}.pagination .active span{color:var(--text-primary);font-weight:var(--font-semibold)}.pagination .disabled span{color:var(--text-muted)}.breadcrumb{list-style:none;margin:var(--space-4)0;padding:0;display:flex;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}.breadcrumb-item+.breadcrumb-item::before{content:">";margin:0 var(--space-2)}.breadcrumb-item a{color:var(--text-secondary);text-decoration:none}.breadcrumb-item a:hover{color:var(--text-primary)}@media(max-width:768px){.container{padding:0 var(--space-3)}article{padding:var(--space-6);margin:var(--space-6)auto}.article-header h1{font-size:var(--text-2xl)}.nav-list{flex-direction:column;gap:var(--space-2);text-align:center}.article-meta{flex-direction:column;gap:var(--space-2)}.pagination{flex-wrap:wrap;gap:var(--space-2)}.articles-grid{padding:0 var(--space-3);gap:var(--space-6);grid-template-columns:1fr}.article-card h3{font-size:var(--text-lg)}}