.blog-container,.blog-sidebar,.toc-toggle,.toc-overlay{--bg:var(--background);--panel:var(--card);--muted:var(--muted-foreground);--accent:var(--primary);--text:var(--foreground)}html{scroll-behavior:smooth}.blog-container{max-width:var(--site-page-outer);padding:10px var(--site-gutter);box-sizing:border-box;color:var(--text);align-items:flex-start;gap:20px;margin:50px auto;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;display:flex}.blog-content{max-width:var(--site-reading-max);background-color:var(--card);box-shadow:var(--shadow-lg);border:1px solid var(--border);color:var(--text);border-radius:10px;flex:1;padding:10px;line-height:1.65}.blog-meta{color:var(--muted);margin-bottom:1rem;font-size:.9rem}.blog-content h1,.blog-content h2,.blog-content h3{color:var(--text);margin:1.1rem 0 .5rem;scroll-margin-top:96px}.blog-content h1{font-size:2rem}.blog-content h2{font-size:1.4rem}.blog-content h3{font-size:1.05rem}.blog-content img{-o-object-fit:cover;object-fit:cover;width:100%;height:auto;max-height:400px;box-shadow:var(--shadow-lg);border:1px solid var(--border);border-radius:8px;margin:1rem 0}.blog-container ul{margin:1rem 0;padding-left:1.5rem;list-style:outside}ol{padding-left:1.5rem}.blog-content code{background:var(--secondary);border-radius:6px;padding:.12rem .35rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace}@media (max-width:900px){.toc-toggle{display:block}.blog-container{padding-top:64px}.blog-sidebar{background:var(--panel);z-index:1101;width:280px;max-width:85vw;height:100%;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-110%);box-shadow:8px 0 24px #0009}.blog-sidebar.show{transform:translate(0)}.blog-content{max-width:100%}.blog-content h1{font-size:1.5rem}.blog-content h2{font-size:1.2rem}.blog-content h3{font-size:1rem}}.code-block{background-color:var(--secondary);color:var(--foreground);border-radius:5px;padding:15px;font-family:monospace;font-size:.9rem;overflow-x:auto}
.blog-sidebar,.toc-toggle,.toc-overlay,.toc-close{--bg:var(--background);--panel:var(--card);--muted:var(--muted-foreground);--accent:var(--primary);--text:var(--foreground);--toc-text:var(--foreground)}.toc-toggle{background:var(--accent);color:#001010;cursor:pointer;border:none;border-radius:8px;margin-top:50px;padding:8px 12px;display:none;position:fixed;top:14px;left:14px;box-shadow:0 6px 18px #00000059}.toc-overlay{background:#00000073;transition:opacity .2s;display:none;position:fixed}.toc-overlay.show{display:block}.blog-sidebar{background-color:var(--card);background:var(--card);border:1px solid var(--border);border-radius:10px;flex:0 0 300px;align-self:flex-start;max-height:calc(100vh - 56px);padding:16px;transition:transform .3s,box-shadow .3s;position:sticky;top:28px;overflow:auto}.blog-sidebar .toc-inner{position:relative}.blog-sidebar.show{margin-top:60px;transform:none;box-shadow:0 6px 18px #00000059}.blog-sidebar h3{color:var(--text);margin:0 0 8px;font-size:1rem}.blog-sidebar ul{margin:0;padding:0;list-style:none}.blog-sidebar li{margin:8px 0}.blog-sidebar li.sub-heading{color:var(--muted);margin-left:12px;font-size:.95rem}.blog-sidebar a{color:var(--accent);text-decoration:none;transition:color .14s}.blog-sidebar a:hover{color:var(--primary);text-decoration:underline}.blog-sidebar li.active>a,.blog-sidebar a.active{color:var(--foreground);font-weight:700;position:relative}.blog-sidebar li.active>a:before{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;position:absolute;top:8px;left:-12px}@media (max-width:900px){.toc-toggle{z-index:1;display:block}.blog-sidebar{background:var(--panel);z-index:1101;width:280px;max-width:85vw;height:100%;position:fixed;top:0;left:0;overflow-y:auto;transform:translate(-110%);box-shadow:8px 0 24px #0009}.blog-sidebar.show{transform:translate(0)}}.toc-close{color:var(--toc-text);cursor:pointer;background:0 0;border:none;font-size:1.4rem;display:none;position:absolute;top:14px;right:14px}@media (max-width:900px){.toc-close{display:block}}