.blog-layout{display:grid;grid-template-columns:1fr;gap:2rem;max-width:1400px;padding:0 1.5rem}@media (min-width:1280px){.blog-layout{grid-template-columns:1fr 320px;gap:4rem}}.blog-post{width:100%;line-height:1.8;color:hsl(var(--foreground));min-width:0}.blog-sidebar{position:relative}.blog-title{background:linear-gradient(135deg,hsl(var(--foreground)) 0,hsl(var(--primary)) 50%,hsl(var(--foreground)) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#0000;animation:shimmer 3s ease-in-out infinite}@keyframes shimmer{0%,to{background-position:0}50%{background-position:100%}}.blog-content h1{display:none}.blog-post h2{margin-top:3rem;margin-bottom:1.5rem;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:hsl(var(--primary));position:relative;padding-bottom:.75rem;scroll-margin-top:100px}.blog-post h2:after{content:"";position:absolute;bottom:0;left:0;width:60px;height:4px;background:linear-gradient(90deg,hsl(var(--primary)),#0000);border-radius:2px;transition:width .3s ease}.blog-post h2:hover:after{width:120px}.blog-post h3{margin-top:2.5rem;margin-bottom:1rem;font-size:1.5rem;font-weight:600;color:hsl(var(--foreground));scroll-margin-top:100px;position:relative;padding-left:1rem}.blog-post h3:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:70%;background:hsl(var(--primary)/.5);border-radius:2px;transition:height .3s ease,background .3s ease}.blog-post h3:hover:before{height:100%;background:hsl(var(--primary))}.blog-post p{margin-bottom:1.5rem;font-size:1.125rem;color:hsl(var(--muted-foreground));transition:color .3s ease}.blog-post p:hover{color:hsl(var(--foreground)/.9)}.blog-post ol,.blog-post ul{margin-bottom:1.5rem;padding-left:2rem;font-size:1.125rem}.blog-post li{margin-bottom:.75rem;position:relative}.blog-post ul li::marker{color:hsl(var(--primary))}.blog-post ol li::marker{color:hsl(var(--primary));font-weight:600}.blog-content img{width:100%;max-height:600px;object-fit:cover;border-radius:var(--radius);margin:3rem 0;box-shadow:0 10px 30px -10px #0000004d;transition:transform .5s ease,box-shadow .5s ease}.blog-content img:hover{transform:scale(1.01);box-shadow:0 20px 50px -15px #0006}.mermaid{background:hsl(var(--muted)/.5);backdrop-filter:blur(10px);padding:2rem;border-radius:var(--radius);box-shadow:0 10px 40px -10px hsl(var(--foreground)/.15),inset 0 1px 0 hsl(var(--background)/.5);margin:3rem 0;display:flex;justify-content:center;cursor:zoom-in;overflow-x:auto;border:1px solid hsl(var(--border));transition:transform .3s ease,box-shadow .3s ease}.mermaid:hover{transform:translateY(-4px);box-shadow:0 20px 60px -10px hsl(var(--foreground)/.2),inset 0 1px 0 hsl(var(--background)/.5)}.mermaid svg{max-width:100%;height:auto}.blog-post a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:4px;text-decoration-color:hsl(var(--primary)/.3);transition:all .3s ease}.blog-post a:hover{text-decoration-color:hsl(var(--primary));text-decoration-thickness:2px}.blog-post blockquote{border-left:4px solid hsl(var(--primary));padding:1.5rem;margin:2rem 0;font-style:italic;background:hsl(var(--muted)/.3);border-radius:0 var(--radius) var(--radius) 0;position:relative;overflow:hidden}.blog-post blockquote:before{content:'"';position:absolute;top:-10px;left:20px;font-size:6rem;font-family:Georgia,serif;color:hsl(var(--primary)/.15);line-height:1}.blog-post strong{font-weight:700;color:hsl(var(--foreground))}.blog-post table{width:100%;margin:2rem 0;border-collapse:collapse;font-size:1rem;border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px -5px hsl(var(--foreground)/.1)}.blog-post td,.blog-post th{padding:1rem 1.25rem;border:1px solid hsl(var(--border));text-align:left;vertical-align:top;transition:background .3s ease}.blog-post th{background-color:hsl(var(--primary)/.1);color:hsl(var(--foreground));font-weight:600}.blog-post tr:hover td{background-color:hsl(var(--muted)/.3)}.blog-post tr:nth-child(2n) td{background-color:hsl(var(--muted)/.15)}.blog-post td{color:hsl(var(--muted-foreground))}.blog-post pre{margin:2rem 0;padding:1.5rem;background:hsl(var(--muted)/.5);border-radius:var(--radius);overflow-x:auto;border:1px solid hsl(var(--border));position:relative}.blog-post pre:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--primary)/.3));border-radius:var(--radius) var(--radius) 0 0}.blog-post code{font-family:Fira Code,Consolas,monospace;font-size:.9rem}.blog-post :not(pre)>code{padding:.2rem .5rem;background:hsl(var(--muted));border-radius:4px;color:hsl(var(--primary));font-weight:500}.blog-post hr{border:none;height:2px;background:linear-gradient(90deg,#0000,hsl(var(--primary)/.5),#0000);margin:3rem 0}:root:not(.dark) .blog-post h2{color:hsl(var(--primary))}:root:not(.dark) .blog-post h3{color:#1b294b}:root:not(.dark) .blog-title{background:linear-gradient(135deg,#1b294b 0,hsl(var(--primary)) 50%,#1b294b 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text}:root:not(.dark) .blog-content img{box-shadow:0 10px 30px -10px #00000026}:root:not(.dark) .mermaid{background:hsl(var(--muted)/.8);box-shadow:0 10px 40px -10px #0000001a,inset 0 1px 0 #ffffff80}:root:not(.dark) .blog-post blockquote{background:hsl(var(--muted)/.5)}.dark .blog-post h2{color:hsl(var(--primary))}.dark .blog-post h3{color:hsl(var(--foreground))}.dark .blog-title{background:linear-gradient(135deg,hsl(var(--foreground)) 0,hsl(var(--primary)) 50%,hsl(var(--foreground)) 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text}.dark .blog-content img{box-shadow:0 10px 40px -10px #00000080}.dark .mermaid{background:hsl(var(--muted)/.3);box-shadow:0 10px 40px -10px #0000004d,inset 0 1px 0 #ffffff0d}.dark .blog-post blockquote{background:hsl(var(--muted)/.2)}@keyframes fade-in{0%{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}.animate-fade-in{animation:fade-in .3s ease-out forwards;opacity:0}@keyframes gradient{0%{background-position:0}50%{background-position:100%}to{background-position:0}}.animate-gradient{animation:gradient 4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width:768px){.blog-post h2{font-size:1.5rem;margin-top:2rem}.blog-post h3{font-size:1.25rem;margin-top:1.5rem}.blog-post p{font-size:1rem}.blog-content img{margin:2rem 0;max-height:400px}.blog-title{font-size:2rem!important}}@media (max-width:640px){.blog-layout{padding:0 1rem}.blog-post h2:after{width:40px}.blog-post h3{padding-left:.75rem}}