.blog-code-block{position:relative;margin:0 0 var(--space-6);border-radius:var(--radius-md);border:var(--border-subtle);overflow:hidden}.blog-code-block__lang{position:absolute;top:0;right:0;padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);background:var(--color-gray-100);border-bottom-left-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.blog-code-block__pre{margin:0;padding:var(--space-6);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.65;background:var(--color-gray-50)!important}.blog-code-block__code{display:block;font-family:inherit;background:none!important;padding:0!important;color:inherit!important}.blog-code-block__line{display:flex}.blog-code-block__line-no{flex-shrink:0;width:2.5rem;padding-right:var(--space-4);text-align:right;color:var(--color-gray-300);-webkit-user-select:none;user-select:none}.blog-code-block__line-content{flex:1;min-width:0}.blog-meta{display:flex;flex-direction:column;gap:var(--space-3)}.blog-meta--inline{flex-direction:row;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4)}.blog-meta--inline .blog-meta__author{gap:var(--space-2)}.blog-meta--inline .blog-meta__details{position:relative;padding-left:var(--space-4)}.blog-meta--inline .blog-meta__details:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:1.25rem;background:var(--color-gray-200)}.blog-meta__author{display:flex;align-items:center;gap:var(--space-3)}.blog-meta__avatar{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-gray-200)}.blog-meta--inline .blog-meta__avatar{width:2rem;height:2rem}.blog-meta__author-info{display:flex;flex-direction:column;gap:.125rem}.blog-meta--inline .blog-meta__author-info{flex-direction:row;align-items:center;gap:var(--space-2)}.blog-meta__author-name{font-size:var(--text-sm);font-weight:600;color:var(--text-primary)}.blog-meta__author-role{font-size:var(--text-xs);color:var(--text-muted)}.blog-meta--inline .blog-meta__author-role:before{content:"·";margin-right:var(--space-2)}.blog-meta__details{display:flex;align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}.blog-meta__date,.blog-meta__reading-time{display:flex;align-items:center;gap:var(--space-1)}.blog-meta__icon{width:1rem;height:1rem}@media(max-width:480px){.blog-meta--inline{flex-direction:column;gap:var(--space-2)}.blog-meta--inline .blog-meta__details:before{display:none}.blog-meta--inline .blog-meta__details{padding-left:0}}.blog-card{display:block;background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:all var(--duration-slow) var(--ease-out);height:100%;box-shadow:var(--shadow-card)}.blog-card:hover{background:var(--surface-card-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.blog-card--featured{border-color:var(--color-gray-200)}.blog-card__content{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);height:100%}.blog-card__header{display:flex;align-items:center;gap:var(--space-3)}.blog-card__category{display:inline-block;padding:var(--space-1) var(--space-3);background:color-mix(in srgb,var(--category-color, var(--color-brand-500)) 12%,transparent);color:var(--category-color, var(--color-brand-600));border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.blog-card__featured-badge{padding:var(--space-1) var(--space-3);background:color-mix(in srgb,var(--color-warning) 12%,transparent);color:var(--color-warning);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.blog-card__title{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:400;margin:0;color:var(--text-primary);line-height:var(--leading-tight)}.blog-card--featured .blog-card__title{font-size:var(--text-3xl)}.blog-card__desc{color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0;flex-grow:1}.blog-card__footer{display:flex;flex-direction:column;gap:var(--space-4);margin-top:auto}.blog-card__read-more{display:flex;align-items:center;gap:var(--space-2);color:var(--text-link);font-size:var(--text-sm);font-weight:500;transition:color var(--duration-normal) var(--ease-out)}.blog-card:hover .blog-card__read-more{color:var(--text-link-hover)}.blog-card__arrow{width:1rem;height:1rem;transition:transform var(--duration-normal) var(--ease-out)}.blog-card:hover .blog-card__arrow{transform:translate(4px)}.blog-pills{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-12)}.blog-pills__pill{padding:var(--space-2) var(--space-5);border:var(--border-card);background:transparent;color:var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--duration-normal) var(--ease-out)}.blog-pills__pill:hover{background:var(--surface-card-hover);border-color:var(--color-gray-300);color:var(--text-primary)}.blog-pills__pill--active{background:color-mix(in srgb,var(--category-color, var(--color-brand-500)) 10%,transparent);border-color:color-mix(in srgb,var(--category-color, var(--color-brand-500)) 30%,transparent);color:var(--category-color, var(--color-brand-600));font-weight:600}.blog-related{max-width:var(--max-width);margin:var(--space-16) auto 0;padding:0 var(--content-padding)}.blog-related__title{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:400;margin:0 0 var(--space-8);color:var(--text-primary)}.blog-related__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-8)}.blog-toc{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-sm)}.blog-toc__title{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 var(--space-4)}.blog-toc__list{list-style:none;padding:0;margin:0}.blog-toc__item{margin:0}.blog-toc__item--level-3{padding-left:var(--space-4)}.blog-toc__link{display:block;padding:var(--space-2) 0;color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);line-height:1.4;transition:color var(--duration-normal) var(--ease-out);border-left:2px solid transparent;padding-left:var(--space-3);margin-left:calc(-1 * var(--space-3))}.blog-toc__link:hover{color:var(--text-primary)}.blog-toc__link--active{color:var(--text-link);border-left-color:var(--text-link)}.blog{padding:var(--space-16) var(--content-padding) var(--space-24);max-width:var(--max-width);margin:0 auto}.blog__hero{margin-bottom:var(--space-12);padding-bottom:var(--space-12);border-bottom:var(--border-subtle)}.blog__hero-content{max-width:var(--max-width)}.blog__title{font-family:var(--font-serif);font-size:clamp(2.25rem,5vw,var(--text-5xl));font-weight:400;letter-spacing:-.01em;line-height:var(--leading-tight);margin:0 0 var(--space-4);color:var(--text-primary)}.blog__description{font-size:var(--text-xl);color:var(--text-secondary);max-width:36rem;margin:0;line-height:var(--leading-relaxed)}.blog__back-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-secondary);text-decoration:none;font-size:var(--text-sm);margin-bottom:var(--space-6);transition:color var(--duration-normal) var(--ease-out)}.blog__back-link:hover{color:var(--text-link)}.blog__back-icon{width:1rem;height:1rem}.blog__section-title{font-family:var(--font-serif);font-size:var(--text-2xl);font-weight:400;margin:0 0 var(--space-8);color:var(--text-primary)}.blog__featured{margin-bottom:var(--space-16)}.blog__featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-8)}.blog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--space-8)}.blog__empty{text-align:center;color:var(--text-muted);font-size:var(--text-lg);padding:var(--space-16) var(--space-8)}@media(max-width:768px){.blog{padding:var(--space-12) var(--content-padding) var(--space-16)}.blog__title{font-size:var(--text-4xl)}.blog__description{font-size:var(--text-lg)}.blog__grid,.blog__featured-grid{grid-template-columns:1fr}}.blog-post{padding:var(--space-8) 0 var(--space-16)}.blog-post__container{max-width:var(--max-width);margin:0 auto;padding:0 var(--content-padding)}.blog-post__breadcrumb{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-8);font-size:var(--text-sm)}.blog-post__breadcrumb-link{display:flex;align-items:center;gap:var(--space-1);color:var(--text-secondary);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}.blog-post__breadcrumb-link:hover{color:var(--text-link)}.blog-post__breadcrumb-icon{width:1rem;height:1rem}.blog-post__breadcrumb-separator{width:1rem;height:1rem;color:var(--color-gray-300)}.blog-post__breadcrumb-current{color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}.blog-post__header{max-width:48rem;margin:0 auto var(--space-12);text-align:center}.blog-post__category{display:inline-block;padding:var(--space-1) var(--space-4);background:color-mix(in srgb,var(--category-color, var(--color-brand-500)) 12%,transparent);color:var(--category-color, var(--color-brand-600));border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-6)}.blog-post__title{font-family:var(--font-serif);font-size:clamp(2rem,5vw,var(--text-5xl));font-weight:400;margin:0 0 var(--space-4);line-height:var(--leading-tight);color:var(--text-primary)}.blog-post__description{font-size:var(--text-xl);color:var(--text-secondary);line-height:var(--leading-relaxed);margin:0 0 var(--space-8)}.blog-post__meta{margin-bottom:var(--space-6)}.blog-post__share{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:transparent;border:var(--border-card);color:var(--text-secondary);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--duration-normal) var(--ease-out)}.blog-post__share:hover{background:var(--surface-card-hover);border-color:var(--color-gray-300);color:var(--text-primary)}.blog-post__layout{display:grid;grid-template-columns:1fr 280px;gap:var(--space-16);align-items:start}.blog-post__content{max-width:48rem;color:var(--text-primary);line-height:1.8;font-size:var(--text-lg)}.blog-post__content h2{font-family:var(--font-serif);font-size:var(--text-3xl);font-weight:400;margin:var(--space-12) 0 var(--space-6);color:var(--text-primary);line-height:var(--leading-tight)}.blog-post__content h3{font-size:var(--text-2xl);font-weight:600;margin:var(--space-10) 0 var(--space-4);color:var(--text-primary);line-height:var(--leading-tight)}.blog-post__content p{margin:0 0 var(--space-6)}.blog-post__content a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--text-link) 30%,transparent);transition:all var(--duration-normal) var(--ease-out)}.blog-post__content a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}.blog-post__content ul,.blog-post__content ol{margin:0 0 var(--space-6);padding-left:var(--space-8)}.blog-post__content li{margin-bottom:var(--space-2)}.blog-post__content code{background:var(--color-gray-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9em;color:var(--color-brand-700)}.blog-post__content pre{background:var(--color-gray-50);border:var(--border-subtle);border-radius:var(--radius-sm);padding:var(--space-6);overflow-x:auto;margin:0 0 var(--space-6)}.blog-post__content pre code{background:none;padding:0;color:var(--text-primary)}.blog-post__content blockquote{border-left:4px solid var(--color-gray-200);padding-left:var(--space-6);margin:0 0 var(--space-6);color:var(--text-secondary);font-style:italic}.blog-post__content img{max-width:100%;height:auto;border-radius:var(--radius-sm);margin:var(--space-8) 0}.blog-post__sidebar{position:sticky;top:var(--space-8)}@media(max-width:1024px){.blog-post__layout{grid-template-columns:1fr}.blog-post__sidebar{display:none}}@media(max-width:768px){.blog-post__title{font-size:var(--text-3xl)}.blog-post__description{font-size:var(--text-lg)}.blog-post__content h2{font-size:var(--text-2xl)}.blog-post__content h3{font-size:var(--text-xl)}}