.blog-article>.container{max-width:1100px}.blog-layout{display:flex;gap:2rem;align-items:flex-start}.blog-layout-content{flex:1;min-width:0;max-width:820px}.blog-toc{width:220px;flex-shrink:0;position:sticky;top:90px;max-height:calc(100vh - 120px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--blog-border) transparent}.blog-toc::-webkit-scrollbar{width:4px}.blog-toc::-webkit-scrollbar-track{background:0 0}.blog-toc::-webkit-scrollbar-thumb{background:var(--blog-border);border-radius:2px}.blog-toc-inner{padding:1rem;background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:var(--blog-radius)}.blog-toc-title{font-size:.8rem;font-weight:700;color:var(--blog-text-muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--blog-border);display:flex;align-items:center;gap:.5rem}.blog-toc-title i{font-size:.75rem;color:var(--blog-primary)}.blog-toc-list{list-style:none;margin:0;padding:0}.blog-toc-item{margin-bottom:2px}.blog-toc-item--sub{padding-left:.75rem}.blog-toc-link{display:block;padding:.3rem .5rem;font-size:.8rem;line-height:1.4;color:var(--blog-text-muted);text-decoration:none;border-radius:4px;border-left:2px solid transparent;transition:color var(--blog-transition),background var(--blog-transition),border-color var(--blog-transition)}.blog-toc-link:hover{color:var(--blog-text);background:rgba(52,152,219,.08)}.blog-toc-link--active{color:var(--blog-primary);background:rgba(52,152,219,.1);border-left-color:var(--blog-primary);font-weight:600}.blog-toc-item--sub .blog-toc-link{font-size:.75rem;padding:.25rem .5rem}.blog-toc-toggle{display:none}@media (max-width:1200px){.blog-toc{width:190px}}@media (max-width:1024px){.blog-layout{flex-direction:column;gap:0}.blog-toc{width:100%;position:relative;top:auto;max-height:none;overflow:visible;margin-bottom:1.5rem}.blog-toc-inner{display:none}.blog-toc-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:var(--blog-radius);color:var(--blog-text-muted);font-size:.875rem;font-weight:600;cursor:pointer;font-family:inherit;transition:color var(--blog-transition),border-color var(--blog-transition)}.blog-toc-toggle:hover{color:var(--blog-text);border-color:var(--blog-primary)}.blog-toc-toggle i:first-child{color:var(--blog-primary);font-size:.8rem}.blog-toc-toggle-icon{margin-left:auto;font-size:.7rem;transition:transform .25s ease}.blog-toc-toggle[aria-expanded=true] .blog-toc-toggle-icon{transform:rotate(180deg)}.blog-toc-nav--open{display:block!important}.blog-toc-nav{display:none;margin-top:.5rem;padding:.75rem 1rem;background:var(--blog-card-bg);border:1px solid var(--blog-border);border-radius:var(--blog-radius);box-shadow:0 4px 12px rgba(0,0,0,.1)}.blog-toc-nav .blog-toc-list{max-height:50vh;overflow-y:auto}#reading-progress{cursor:pointer;transition:height .2s ease}#reading-progress:hover{height:6px}}@media print{.blog-toc{display:none!important}.blog-layout{display:block}}.tuto-article a:not(.btn):not(.tag),.tutorial-content a:not(.btn):not(.tag){color:var(--accent, #3498db);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.tuto-article a:not(.btn):not(.tag):hover,.tutorial-content a:not(.btn):not(.tag):hover{text-decoration-thickness:2px}