*,*:before,*:after{box-sizing:border-box}:root{--bg-color: #fafafa;--text-main: #2d3748;--text-muted: #64748b;--accent-color: rgb(10, 232, 138);--accent-dark: rgb(5, 130, 77);--border-color: #e2e8f0;--bg-pattern: radial-gradient(#cbd5e1 1px, transparent 1px);--font-heading: "Outfit", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif}body{font-family:var(--font-body);font-size:1.05rem;line-height:1.75;color:var(--text-main);background-color:var(--bg-color);background-image:var(--bg-pattern);background-size:24px 24px;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;min-height:100vh}::selection{background-color:#0ae88a33;color:#000}.layout-wrapper{display:grid;grid-template-columns:1fr;max-width:1000px;margin:0 auto;padding:3rem 1.5rem 1rem;gap:4rem;flex:1;width:100%}@media(min-width:850px){.layout-wrapper{grid-template-columns:2fr 250px;padding:5rem 2rem 2rem}}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:#0f172a;font-weight:700;letter-spacing:-.02em}h1{font-size:2.5rem;line-height:1.2;margin-bottom:1rem}h2{font-size:1.75rem;margin-top:3rem;margin-bottom:1rem}h3{font-size:1.25rem;margin-top:2rem;margin-bottom:.75rem}a{color:var(--accent-dark);text-decoration:none;transition:all .2s ease}a:hover{color:var(--accent-color)}.blog-nav{margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column-reverse;align-items:flex-start;gap:1.5rem}@media(min-width:600px){.blog-nav{flex-direction:row;justify-content:space-between}}.blog-header-info{display:flex;flex-direction:column;gap:.5rem}.blog-nav .blog-title{font-family:var(--font-heading);font-weight:800;color:#0f172a;font-size:1.6rem;letter-spacing:-.03em;display:inline-flex;align-items:center;gap:.4rem;background-color:#fff;padding:.2rem .8rem;border-radius:.5rem;box-shadow:0 1px 3px #0000000d;border:1px solid var(--border-color);width:max-content}.blog-nav .blog-title span.highlight{color:var(--accent-dark)}.blog-nav .blog-title span.separator{color:#cbd5e1;font-weight:400;margin:0 .2rem}.blog-nav .blog-legend{margin:0;font-size:.95rem;color:var(--text-muted);padding-left:.4rem;line-height:1.4}.blog-nav a.back-to-portfolio{font-weight:500;color:var(--text-muted);font-size:.85rem;padding:.4rem .8rem;border-radius:9999px;background-color:#fff;border:1px solid var(--border-color);transition:all .2s ease;white-space:nowrap}.blog-nav a.back-to-portfolio:hover{color:#0f172a;border-color:#cbd5e1;box-shadow:0 2px 4px #0000000d}.main-content{animation:fadeIn .6s ease-out}.sidebar{position:sticky;top:3rem;height:max-content;border-left:1px solid var(--border-color);padding-left:2rem;display:none}@media(min-width:850px){.sidebar{display:block;animation:fadeIn .8s ease-out}}.sidebar-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600;margin-bottom:1rem;margin-top:0}pre{background-color:#0f172a;color:#f8fafc;padding:1.25rem;border-radius:.5rem;overflow-x:auto;font-size:.9rem;box-shadow:0 4px 6px -1px #0000001a;margin:2rem 0}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;background-color:#f1f5f9;padding:.2em .4em;border-radius:.25rem;font-size:.85em;color:#e11d48}pre code{background-color:transparent;padding:0;color:inherit}.tag-pill{display:inline-block;background-color:#0ae88a1a;color:var(--accent-dark);padding:.2rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600;margin-right:.5rem;margin-bottom:.5rem;border:1px solid rgba(10,232,138,.2)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.blog-footer{margin-top:0;border-top:1px solid var(--border-color);padding:1rem 1.5rem;background-color:transparent}.footer-content{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--text-muted);font-size:.9rem;text-align:center}@media(min-width:600px){.footer-content{flex-direction:row;justify-content:space-between;text-align:left}}.footer-links{display:flex;gap:1.5rem}.footer-links a{color:var(--text-muted);font-weight:500;transition:color .2s ease}.footer-links a:hover{color:#0f172a}
