.blog-bg{position:fixed;inset:0;z-index:-1;pointer-events:none}.blog-bg__canvas{width:100%;height:100%}.blog-hero{position:relative;overflow:hidden;margin-bottom:var(--spacing-xl)}.blog-hero[hidden]{display:none}.blog-hero__link{display:block;position:relative;text-decoration:none;color:#fff}.blog-hero__img-wrap{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden}@media (min-width: 768px){.blog-hero__img-wrap{aspect-ratio:21 / 9}}.blog-hero__img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.blog-hero__link:hover .blog-hero__img{transform:scale(1.03)}.blog-hero__overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.1) 70%,transparent 100%)}.blog-hero__content{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-xl) var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}@media (min-width: 768px){.blog-hero__content{padding:var(--spacing-2xl) var(--spacing-xl);max-width:720px}}.blog-hero__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.blog-hero__tags .tag{background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:#ffffff40;color:#fff;font-size:var(--font-size-xs, .75rem)}.blog-hero__title{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin:0;text-shadow:0 2px 12px rgba(0,0,0,.4)}.blog-hero__excerpt{font-size:var(--font-size-md, 1.125rem);margin:0;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.3)}.blog-hero__meta{display:flex;gap:var(--spacing-md);font-size:var(--font-size-sm);opacity:.7}.blog-hero__cta{display:inline-flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary-light, var(--color-primary));opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}.blog-hero__link:hover .blog-hero__cta,.blog-hero__link:focus-visible .blog-hero__cta{opacity:1;transform:translateY(0)}.blog-hero__link:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.blog-grid--skeleton[hidden]{display:none}.blog-card-skeleton{border-radius:var(--radius-lg);overflow:hidden;background:#ffffff0a;border:1px solid var(--color-border)}.blog-card-skeleton__img{width:100%;aspect-ratio:16 / 9;background:linear-gradient(90deg,#ffffff08 25%,#ffffff14,#ffffff08 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}.blog-card-skeleton__body{padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.blog-card-skeleton__line{height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,#ffffff0a 25%,#ffffff14,#ffffff0a 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}.blog-card-skeleton__line--short{width:40%}.blog-card-skeleton__line--medium{width:70%}.blog-card-skeleton__line--long{width:100%}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}[data-theme=light] .blog-card-skeleton{background:#00000008;border-color:#00000014}[data-theme=light] .blog-card-skeleton__img,[data-theme=light] .blog-card-skeleton__line{background:linear-gradient(90deg,#0000000a 25%,#00000014,#0000000a 75%);background-size:200% 100%}.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--spacing-lg)}@media (hover: hover){.blog-grid:hover .blog-card{filter:blur(2px) brightness(.75);opacity:.65;transform:perspective(800px) scale(.97)}.blog-grid:hover .blog-card:hover{filter:blur(0) brightness(1);opacity:1;transform:perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.02);z-index:2}.blog-grid:focus-within .blog-card{filter:blur(2px) brightness(.75);opacity:.65;transform:perspective(800px) scale(.97)}.blog-grid:focus-within .blog-card:focus-within{filter:blur(0) brightness(1);opacity:1;transform:perspective(800px) scale(1.02);z-index:2}}.blog-card--hiding{opacity:0!important;transform:scale(.92)!important;pointer-events:none}.blog-loading,.post-loading{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xl) 0;color:var(--color-muted)}.blog-loading[hidden],.post-loading[hidden]{display:none}.blog-empty,.blog-error-msg{text-align:center;color:var(--color-muted);padding:var(--spacing-xl) 0}.blog-pagination{text-align:center;padding:var(--spacing-xl) 0}.blog-card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);overflow:hidden;background:hsl(var(--hue-primary, 220) 30% 10% / .55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid hsl(var(--hue-primary, 220) var(--sat-primary, 50%) 40% / .15);transform:perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));transform-style:preserve-3d;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color var(--transition-base),box-shadow var(--transition-base)}.blog-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-primary-light, var(--color-primary)),var(--color-secondary, var(--color-primary)),transparent);opacity:.5;z-index:2;transition:opacity var(--transition-base)}.blog-card:after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--glare-x, 50%) var(--glare-y, 50%),rgba(255,255,255,.06) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity var(--transition-fast);z-index:1}.blog-card:hover:after{opacity:1}.blog-card:hover{border-color:var(--color-primary, rgba(255, 255, 255, .2));box-shadow:0 12px 40px #00000059,0 0 0 1px hsl(var(--hue-primary, 220) var(--sat-primary, 50%) 50% / .15),0 0 20px hsl(var(--hue-primary, 220) var(--sat-primary, 50%) 50% / .08)}.blog-card:hover:before{opacity:1}.blog-card:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}[data-theme=light] .blog-card{background:hsl(var(--hue-primary, 220) 25% 98% / .65);border-color:hsl(var(--hue-primary, 220) 30% 70% / .2)}[data-theme=light] .blog-card:after{background:radial-gradient(300px circle at var(--glare-x, 50%) var(--glare-y, 50%),rgba(0,0,0,.03) 0%,transparent 70%)}[data-theme=light] .blog-card:hover{box-shadow:0 12px 40px #0000001a,0 0 0 1px hsl(var(--hue-primary, 220) 30% 50% / .08)}.blog-card__img-wrap{position:relative;overflow:hidden}.blog-card__img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0;filter:saturate(.9) brightness(.95);transition:transform .4s cubic-bezier(.23,1,.32,1),filter .4s ease}.blog-card:hover .blog-card__img{transform:scale(1.05);filter:saturate(1) brightness(1)}.blog-card__date-badge{position:absolute;top:var(--spacing-md);right:var(--spacing-md);display:flex;flex-direction:column;align-items:center;background:var(--color-primary, #283593);color:#fff;border-radius:var(--radius-md);padding:var(--spacing-xs) var(--spacing-sm);min-width:48px;line-height:1.1;font-weight:var(--font-weight-bold);box-shadow:0 2px 8px #0000004d,0 0 12px hsl(var(--hue-primary, 220) var(--sat-primary, 50%) 50% / .3);z-index:2}.blog-card__date-badge-day{font-size:var(--font-size-lg)}.blog-card__date-badge-month{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;opacity:.85}.blog-card__body{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-lg);flex:1}.blog-card__meta{display:flex;gap:var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-muted)}.blog-card__date,.blog-card__author{font-size:var(--font-size-sm);color:var(--color-muted)}.blog-card__title{font-size:var(--font-size-lg, 1.125rem);margin:0;line-height:var(--line-height-tight)}.blog-card__excerpt{color:var(--color-muted);margin:0;font-size:var(--font-size-sm);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.blog-card__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);padding-top:var(--spacing-sm)}.blog-card__read-more{margin-top:auto;padding-top:var(--spacing-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-primary-light, var(--color-primary));display:inline-flex;align-items:center;gap:var(--spacing-xs);opacity:0;transform:translate(-8px);transition:opacity .3s ease,transform .3s ease}.blog-card__read-more svg{transition:transform .3s ease}.blog-card:hover .blog-card__read-more{opacity:1;transform:translate(0)}.blog-card:hover .blog-card__read-more svg{transform:translate(3px)}@media (pointer: coarse){.blog-card__read-more{opacity:1;transform:translate(0)}}.blog-tags{position:relative;display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:var(--spacing-xs);mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.blog-tags::-webkit-scrollbar{display:none}@media (min-width: 768px){.blog-tags{flex-wrap:wrap;overflow-x:visible;mask-image:none;-webkit-mask-image:none;padding-left:0;padding-right:0}}.tag{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);border:1px solid var(--color-border);background:#ffffff0a;color:var(--color-muted);font-size:var(--font-size-sm);font-family:inherit;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.tag:hover{color:var(--color-text);border-color:#fff3;background:#ffffff14}.tag--active{color:#fff;border-color:var(--color-primary, rgba(255, 255, 255, .3));background:var(--color-primary, rgba(255, 255, 255, .15));box-shadow:0 0 12px hsl(var(--hue-primary, 220) var(--sat-primary, 50%) 50% / .2)}[data-theme=light] .tag--active{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}.tag--sm{padding:2px var(--spacing-sm);font-size:var(--font-size-xs, .75rem);cursor:default}.post__toc-list{list-style:none;padding:0;margin:0}.post__toc-item{margin:0}.post__toc-item--sub{padding-left:var(--spacing-md)}.post__toc-link{display:block;padding:var(--spacing-xs) var(--spacing-sm);color:var(--color-muted);font-size:var(--font-size-sm);text-decoration:none;border-left:2px solid transparent;transition:color var(--transition-fast),border-color var(--transition-fast)}.post__toc-link:hover{color:var(--color-text)}.post__heading--linked{position:relative}.post__heading-anchor{position:absolute;left:-28px;top:50%;transform:translateY(-50%);opacity:0;color:var(--color-muted);transition:opacity var(--transition-fast),color var(--transition-fast);text-decoration:none;padding:var(--spacing-xs)}.post__heading--linked:hover .post__heading-anchor{opacity:.6}.post__heading-anchor:hover{opacity:1!important;color:var(--color-primary)}.post__code-copy{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);background:#ffffff14;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-muted);padding:var(--spacing-xs);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);line-height:1}.post__code-copy:hover{background:#ffffff26;color:var(--color-text)}@property --grad-rotation{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.post__related .blog-grid{display:flex;gap:var(--spacing-lg);overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-inline:var(--spacing-md);scrollbar-width:none;overscroll-behavior-x:contain;padding:var(--spacing-md) 0;margin:calc(-1 * var(--spacing-md)) 0}.post__related .blog-grid::-webkit-scrollbar{display:none}.post__related-nav{display:flex;justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.post__related-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:#ffffff0f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--color-text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast)}.post__related-btn:hover{background:#ffffff1f;border-color:#fff3}.post__related-btn:disabled{opacity:.3;cursor:default}[data-theme=light] .post__related-btn{background:#0000000a}[data-theme=light] .post__related-btn:hover{background:#00000014}.blog-subscribe{text-align:center;padding:var(--spacing-xxl, 4rem) 0;border-top:1px solid var(--color-border);max-width:560px;margin:0 auto}.blog-subscribe__title{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-lg)}.blog-subscribe__text{margin:0 0 var(--spacing-lg) 0;color:var(--color-muted)}.blog-subscribe__row{display:flex;gap:var(--spacing-sm)}.blog-subscribe__input{flex:1}.blog-subscribe__btn{flex-shrink:0}.blog-subscribe__status{margin-top:var(--spacing-md);font-size:var(--font-size-sm)}.blog-subscribe__status--success{color:var(--color-success)}.blog-subscribe__status--error{color:var(--color-error)}@media (max-width: 480px){.blog-subscribe__row{flex-direction:column}}