html{scroll-behavior:smooth}.blog-container{display:flex;max-width:1300px;margin:50px auto;gap:20px;align-items:flex-start;box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}.blog-container,.blog-content{padding:10px;color:var(--text)}.blog-content{flex:1 1;line-height:1.65;max-width:900px;background-color:#1e1e1e;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.35)}.blog-meta{font-size:.9rem;color:var(--muted);margin-bottom:1rem}.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{width:100%;height:auto;max-height:400px;border-radius:8px;margin:1rem 0;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.03)}ul{list-style:disc;margin:1rem 0}ol,ul{padding-left:1.5rem}.blog-content code{background:rgba(255,255,255,.03);padding:.12rem .35rem;border-radius:6px;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{position:fixed;left:0;top:0;height:100%;width:280px;max-width:85vw;transform:translateX(-110%);box-shadow:8px 0 24px rgba(0,0,0,.6);background:var(--panel);z-index:1101;overflow-y:auto}.blog-sidebar.show{transform:translateX(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:#000;color:rgb(204,207,204);padding:15px;border-radius:5px;font-family:monospace;overflow-x:auto;font-size:.9rem}:root{--bg:#0f1115;--panel:#111316;--muted:#9fb7b5;--accent:#93f5e9;--text:#e6eef7}.toc-toggle{margin-top:50px;top:14px;left:14px;background:var(--accent);color:#001010;border:none;padding:8px 12px;border-radius:8px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35)}.toc-overlay,.toc-toggle{display:none;position:fixed}.toc-overlay{background:rgba(0,0,0,.45);transition:opacity .2s ease}.toc-overlay.show{display:block}.blog-sidebar{flex:0 0 300px;background-color:#1e1e1e;position:-webkit-sticky;position:sticky;top:28px;align-self:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.03);padding:16px;border-radius:10px;max-height:calc(100vh - 56px);overflow:auto;transition:transform .3s ease,box-shadow .3s ease}.blog-sidebar .toc-inner{position:relative}.blog-sidebar.show{transform:none;box-shadow:0 6px 18px rgba(0,0,0,.35);margin-top:60px}.blog-sidebar h3{margin:0 0 8px;color:var(--text);font-size:1rem}.blog-sidebar ul{list-style:none;padding:0;margin:0}.blog-sidebar li{margin:8px 0}.blog-sidebar li.sub-heading{margin-left:12px;font-size:.95rem;color:var(--muted)}.blog-sidebar a{color:var(--accent);text-decoration:none;transition:color .14s ease}.blog-sidebar a:hover{color:#6ee9d6;text-decoration:underline}.blog-sidebar a.active,.blog-sidebar li.active>a{font-weight:700;color:#fff;position:relative}.blog-sidebar li.active>a:before{content:"";position:absolute;left:-12px;top:8px;width:6px;height:6px;background:var(--accent);border-radius:50%}@media (max-width:900px){.toc-toggle{display:block;z-index:1}.blog-sidebar{position:fixed;left:0;top:0;height:100%;width:280px;max-width:85vw;transform:translateX(-110%);box-shadow:8px 0 24px rgba(0,0,0,.6);background:var(--panel);z-index:1101;overflow-y:auto}.blog-sidebar.show{transform:translateX(0)}}.toc-close{position:absolute;top:14px;right:14px;background:transparent;border:none;color:var(--toc-text);font-size:1.4rem;cursor:pointer;display:none}@media (max-width:900px){.toc-close{display:block}}