.blog-post-page{background:var(--studio-bg-deep);flex-direction:column;min-height:100vh;display:flex;position:relative;overflow:hidden}.blog-post-page:before{content:"";opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");position:absolute;inset:0}.blog-post-container{width:100%;max-width:900px;padding:var(--space-8);z-index:1;flex:1;margin:0 auto;position:relative}.blog-post-content{background:var(--studio-bg-primary);border:1px solid var(--studio-border);border-radius:var(--radius-2xl);padding:var(--space-10);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.blog-post-content:before{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff05 0%,#0000 100%);position:absolute;inset:0}.blog-breadcrumb{align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-family:var(--font-body);font-size:var(--text-small);z-index:1;flex-wrap:wrap;display:flex;position:relative}.blog-breadcrumb a{color:var(--studio-accent);font-weight:var(--weight-medium);transition:color var(--duration-base)var(--ease-out);text-decoration:none}.blog-breadcrumb a:hover{color:var(--studio-accent-hover);text-decoration:underline}.breadcrumb-separator{color:var(--studio-text-muted)}.breadcrumb-current{color:var(--studio-text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:300px;overflow:hidden}.blog-article{margin-bottom:var(--space-8);z-index:1;position:relative}.article-hero-image{border-radius:var(--radius-xl);width:100%;height:300px;margin-bottom:var(--space-6);background:var(--studio-bg-surface);justify-content:center;align-items:center;display:flex;overflow:hidden}.article-hero-image img{object-fit:cover;width:100%;height:100%}.article-hero-image svg{width:64px;height:64px;color:var(--studio-text-muted);opacity:.3}.article-category{margin-bottom:var(--space-4)}.category-badge{padding:var(--space-1)var(--space-4);background:var(--studio-accent);color:var(--studio-text-inverse);font-family:var(--font-body);font-size:var(--text-micro);font-weight:var(--weight-semibold);border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px;display:inline-block}.article-title{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-bold);color:var(--studio-text-primary);margin:0 0 var(--space-4)0;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.article-meta{align-items:center;gap:var(--space-3);margin-bottom:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--studio-border);font-family:var(--font-body);font-size:var(--text-small);color:var(--studio-text-muted);flex-wrap:wrap;display:flex}.meta-author{font-weight:var(--weight-medium);color:var(--studio-text-secondary)}.meta-separator{color:var(--studio-border)}.article-body{font-family:var(--font-body);color:var(--studio-text-secondary);font-size:1.0625rem;line-height:1.8}.article-body h1{font-family:var(--font-display);font-size:var(--text-h1);font-weight:var(--weight-bold);color:var(--studio-text-primary);margin:var(--space-10)0 var(--space-4)0;line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}.article-body h2{font-family:var(--font-display);font-size:var(--text-h2);font-weight:var(--weight-bold);color:var(--studio-text-primary);margin:var(--space-10)0 var(--space-4)0;padding-top:var(--space-6);border-top:1px solid var(--studio-border);line-height:var(--leading-snug)}.article-body h3{font-family:var(--font-body);font-size:var(--text-h3);font-weight:var(--weight-semibold);color:var(--studio-text-primary);margin:var(--space-8)0 var(--space-3)0;line-height:var(--leading-snug)}.article-body h4{font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semibold);color:var(--studio-text-primary);margin:var(--space-6)0 var(--space-2)0}.article-body p{margin:0 0 var(--space-5)0}.article-body ul,.article-body ol{margin:0 0 var(--space-5)0;padding-left:var(--space-6)}.article-body li{margin-bottom:var(--space-2)}.article-body li::marker{color:var(--studio-accent)}.article-body strong{font-weight:var(--weight-semibold);color:var(--studio-text-primary)}.article-body a{color:var(--studio-accent);transition:all var(--duration-base)var(--ease-out);border-bottom:1px solid #0000;text-decoration:none}.article-body a:hover{border-bottom-color:var(--studio-accent)}.article-body blockquote{margin:var(--space-6)0;padding:var(--space-4)var(--space-6);background:var(--studio-bg-surface);border-left:4px solid var(--studio-accent);border-radius:0 var(--radius-lg)var(--radius-lg)0;color:var(--studio-text-secondary);font-style:italic}.article-body blockquote p:last-child{margin-bottom:0}.article-body code{background:var(--studio-bg-surface);color:var(--studio-accent);padding:2px var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.9em}.article-body pre{background:var(--studio-bg-surface);border:1px solid var(--studio-border);color:var(--studio-text-primary);padding:var(--space-5);border-radius:var(--radius-lg);margin:var(--space-6)0;overflow-x:auto}.article-body pre code{color:inherit;font-size:var(--text-small);background:0 0;padding:0}.article-body img{border-radius:var(--radius-lg);max-width:100%;height:auto;margin:var(--space-6)0}.article-body hr{background:var(--studio-border);height:1px;margin:var(--space-8)0;border:none}.article-body table{border-collapse:collapse;width:100%;margin:var(--space-6)0;font-size:var(--text-small);border-radius:var(--radius-lg);border:1px solid var(--studio-border);overflow:hidden}.article-body thead{background:var(--studio-bg-elevated)}.article-body th{padding:var(--space-3)var(--space-4);text-align:left;font-weight:var(--weight-semibold);color:var(--studio-text-primary);border-bottom:2px solid var(--studio-border)}.article-body td{padding:var(--space-3)var(--space-4);border-bottom:1px solid var(--studio-border);color:var(--studio-text-secondary)}.article-body tbody tr:last-child td{border-bottom:none}.article-body tbody tr:hover,.article-body tbody tr:nth-child(2n){background:var(--studio-bg-surface)}.article-body tbody tr:nth-child(2n):hover{background:var(--studio-bg-elevated)}.author-card{align-items:center;gap:var(--space-4);padding:var(--space-5);background:var(--studio-bg-elevated);border:1px solid var(--studio-border);border-radius:var(--radius-lg);margin-top:var(--space-8);z-index:1;display:flex;position:relative}.author-avatar{border-radius:var(--radius-full);background:var(--studio-accent);width:56px;height:56px;color:var(--studio-text-inverse);box-shadow:var(--shadow-glow-sm);flex-shrink:0;justify-content:center;align-items:center;display:flex}.author-avatar svg{width:28px;height:28px}.author-info{gap:var(--space-1);flex-direction:column;display:flex}.author-name{font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--studio-text-primary)}.author-role{font-family:var(--font-body);font-size:var(--text-small);color:var(--studio-text-muted)}.post-navigation{gap:var(--space-4);padding-top:var(--space-8);border-top:1px solid var(--studio-border);z-index:1;flex-wrap:wrap;justify-content:center;display:flex;position:relative}.back-to-blog-btn,.try-tool-btn{padding:var(--space-3)var(--space-6);font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semibold);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-base)var(--ease-out-expo)}.back-to-blog-btn{color:var(--studio-text-secondary);border:1px solid var(--studio-border);background:0 0}.back-to-blog-btn:hover{color:var(--studio-text-primary);border-color:var(--studio-border-accent);transform:translateY(-2px)}.try-tool-btn{background:var(--studio-accent);color:var(--studio-text-inverse);box-shadow:var(--shadow-sm);border:none}.try-tool-btn:hover{box-shadow:var(--shadow-glow);transform:translateY(-2px)}.blog-not-found{text-align:center;padding:var(--space-16)var(--space-8);z-index:1;position:relative}.blog-not-found h1{font-family:var(--font-display);font-size:var(--text-h1);color:var(--studio-text-primary);margin:0 0 var(--space-4)0}.blog-not-found p{font-family:var(--font-body);color:var(--studio-text-secondary);margin:0 0 var(--space-8)0}[data-theme=light] .blog-post-page{background:var(--studio-bg-elevated)}[data-theme=light] .blog-post-page:before{opacity:.02}[data-theme=light] .blog-post-content{background:var(--studio-bg-primary);box-shadow:var(--shadow-lg)}[data-theme=light] .article-hero-image{background:var(--studio-bg-deep)}[data-theme=light] .author-card{background:var(--studio-bg-surface)}[data-theme=light] .article-body pre,[data-theme=light] .article-body blockquote,[data-theme=light] .article-body code{background:var(--studio-bg-deep)}@media (max-width:768px){.blog-post-container{padding:var(--space-4)}.blog-post-content{padding:var(--space-6);border-radius:var(--radius-xl)}.article-hero-image{border-radius:var(--radius-lg);height:200px}.article-title{font-size:var(--text-h2)}.article-meta{gap:var(--space-2);font-size:var(--text-micro)}.article-body{font-size:1rem}.article-body h2{font-size:var(--text-h3)}.author-card{padding:var(--space-4)}.author-avatar{width:48px;height:48px}.post-navigation{flex-direction:column}.back-to-blog-btn,.try-tool-btn{text-align:center;width:100%}}@media (max-width:640px){.article-body table{font-size:var(--text-micro)}.article-body th,.article-body td{padding:var(--space-2)var(--space-3)}}@media (max-width:480px){.blog-post-content{padding:var(--space-5)var(--space-4)}.article-title{font-size:var(--text-h3)}.breadcrumb-current{display:none}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.blog-article{animation:.6s ease-out fadeInUp}@media (prefers-reduced-motion:reduce){.blog-breadcrumb a,.article-body a,.back-to-blog-btn,.try-tool-btn{transition:none}.back-to-blog-btn:hover,.try-tool-btn:hover{transform:none}.blog-article{animation:none}}
