body{background:var(--preview-body-bg, #ffffff)}main{background:transparent}.blog-container{--blog-primary-start: var(--preview-primary, #1d6ff2);--blog-primary-end: var(--preview-secondary, #38a9ff);--blog-accent-start: var(--preview-accent, #f6a623);--blog-accent-end: var(--preview-secondary, #38a9ff);--blog-gradient: var(--preview-gradient, linear-gradient(135deg, #0f4fb8 0%, #1d6ff2 54%, #38a9ff 100%));--blog-highlight-gradient: var(--preview-highlight-gradient, linear-gradient(135deg, #f8c44f 0%, #f97316 100%));--blog-panel-gradient: var(--preview-panel-gradient, linear-gradient(145deg, rgba(31, 111, 235, .075), rgba(56, 169, 255, .065)));--blog-text-primary: var(--preview-text, #0e1b31);--blog-text-secondary: var(--preview-muted, #5c6c84);--blog-border: var(--preview-line, rgba(31, 111, 235, .17));--blog-card-bg: var(--preview-surface, rgba(255, 255, 255, .94));--blog-surface-strong: var(--preview-surface-strong, #ffffff);--blog-shadow-rgb: var(--preview-shadow-rgb, 31, 86, 154);--blog-accent-soft: var(--preview-accent-soft, rgba(246, 166, 35, .16));max-width:none;margin:0 auto;padding:2rem 1rem;position:relative;background:transparent}.blog-hero{max-width:1600px;margin:0 auto 3rem;padding:3rem 2rem;text-align:center;border:1px solid var(--blog-border);border-radius:22px;background:var(--blog-card-bg);box-shadow:0 14px 32px rgba(var(--blog-shadow-rgb),.08);backdrop-filter:blur(8px)}.blog-title{font-size:3.5rem;font-weight:700;margin:0 0 1rem;background:var(--blog-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeInDown .6s ease}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.blog-intro{font-size:1.25rem;color:var(--blog-text-secondary);max-width:700px;margin:0 auto;line-height:1.8;animation:fadeIn .6s ease .2s backwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.main-container{max-width:1600px;margin:0 auto}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%}.blog-card{background:var(--blog-card-bg);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(var(--blog-shadow-rgb),.12);border:1px solid var(--blog-border);transition:all .4s cubic-bezier(.4,0,.2,1);opacity:0;animation:fadeInUp .6s ease forwards}.blog-card:nth-child(1){animation-delay:.1s}.blog-card:nth-child(2){animation-delay:.2s}.blog-card:nth-child(3){animation-delay:.3s}.blog-card:nth-child(4){animation-delay:.4s}.blog-card:nth-child(5){animation-delay:.5s}.blog-card:nth-child(6){animation-delay:.6s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.blog-card:hover{transform:translateY(-8px);box-shadow:0 16px 38px rgba(var(--blog-shadow-rgb),.18),0 3px 0 var(--blog-accent-soft);border-color:color-mix(in srgb,var(--blog-primary-start) 52%,var(--blog-border))}.blog-card-link{display:block;text-decoration:none;color:inherit}.blog-card-image-wrapper{width:100%;height:240px;overflow:hidden;background:var(--blog-panel-gradient)}.blog-card-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.blog-card:hover .blog-card-image{transform:scale(1.08)}.blog-card-content{padding:1.5rem;position:relative}.blog-card-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.blog-tag{display:inline-block;padding:.375rem .875rem;font-size:.875rem;font-weight:600;color:#fff;background:var(--blog-gradient);border-radius:20px;transition:all .3s ease}.blog-card:hover .blog-tag{transform:translateY(-2px);box-shadow:0 5px 14px rgba(var(--blog-shadow-rgb),.22)}.blog-card-title{font-size:1.25rem;font-weight:700;color:var(--blog-text-primary);margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:color .3s ease}.blog-card:hover .blog-card-title{background:var(--blog-highlight-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar{width:320px;background:var(--blog-card-bg);border-radius:16px;padding:1.75rem;box-shadow:0 12px 28px rgba(var(--blog-shadow-rgb),.12);border:1px solid var(--blog-border);position:fixed;top:50%;right:2rem;transform:translateY(-50%);max-height:80vh;overflow-y:auto;z-index:100}.sidebar h3{margin-top:0;font-size:1.25rem;font-weight:700;color:var(--blog-text-primary);margin-bottom:1rem;background:var(--blog-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tag-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.tag-item{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.875rem 1.25rem;border-radius:8px;transition:background .2s ease;white-space:nowrap;min-height:48px}.tag-item:hover{background:color-mix(in srgb,var(--blog-primary-start) 8%,var(--blog-surface-strong))}.tag-item a{color:var(--blog-text-primary);text-decoration:none;font-weight:500;font-size:1rem;transition:color .2s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:.5rem}.tag-item a:hover{color:var(--blog-primary-start)}.tag-count{color:var(--blog-accent-start);font-size:.9rem;font-weight:600;background:var(--blog-accent-soft);padding:.375rem .75rem;border-radius:12px;flex-shrink:0;margin-left:.75rem;min-width:2.5rem;text-align:center}@media(min-width:1920px){.blog-hero,.main-container{max-width:1800px}.sidebar{right:3rem;width:120px}}@media(max-width:1600px){.blog-hero,.main-container{max-width:1400px}}@media(max-width:1400px){.sidebar{right:1rem;width:300px}}@media(max-width:1200px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem}.sidebar{width:280px}}@media(max-width:1100px){.blog-hero{max-width:100%;padding:2.5rem 1.5rem}.main-container{max-width:100%;padding:0 1rem}.sidebar{position:relative;top:0;right:auto;width:100%;max-width:600px;margin:3rem auto 0;transform:none}.blog-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}}@media(max-width:768px){.blog-container{padding:1rem .75rem}.blog-hero{padding:2rem 1rem;margin-bottom:2rem}.blog-title{font-size:clamp(2rem,6vw,2.5rem)}.blog-intro{font-size:clamp(1rem,3vw,1.1rem);padding:0 1rem}.main-container{max-width:100%;padding:0 .75rem}.blog-grid{grid-template-columns:1fr;gap:1.5rem}.sidebar{position:relative;top:0;right:auto;width:100%;max-width:100%;margin-top:2rem;padding:1.5rem 1.25rem;transform:none}.tag-item{padding:.75rem 1rem}.tag-item a{font-size:.95rem}.blog-card-image-wrapper{height:200px}.blog-card-content{padding:1.25rem}.blog-card-title{font-size:1.15rem}}@media(max-width:480px){.blog-container{padding:.75rem .5rem}.blog-hero{padding:1.5rem .75rem;margin-bottom:1.5rem}.blog-title{font-size:clamp(1.75rem,7vw,2rem);margin-bottom:.75rem}.blog-intro{font-size:clamp(.9rem,3.5vw,1rem);padding:0 .5rem}.main-container{padding:0 .5rem}.blog-grid{gap:1.25rem}.sidebar{padding:1.25rem 1rem;margin-top:1.5rem}.sidebar h3{font-size:1.1rem;margin-bottom:.875rem}.tag-list{gap:.625rem}.tag-item{padding:.625rem .875rem;min-height:44px}.tag-item a{font-size:.9rem}.tag-count{font-size:.85rem;padding:.3rem .625rem;min-width:2.25rem}.blog-card-image-wrapper{height:180px}.blog-card-content{padding:1rem}.blog-card-title{font-size:1.05rem}.blog-tag{font-size:.8rem;padding:.3rem .75rem}}