:root{--bg-primary:linear-gradient(135deg,#f8fafc,#e0f2fe);--bg-secondary:rgba(255,255,255,0.6);--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border-color:rgba(226,232,240,0.6);--accent-primary:#3b82f6;--accent-secondary:#8b5cf6;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--radius-2xl:1.5rem}.dark{--bg-primary:linear-gradient(135deg,#0f172a,#1e293b);--bg-secondary:rgba(30,41,59,0.6);--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-color:rgba(71,85,105,0.6)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-primary)}.blog-container,body{background:var(--bg-primary);transition:all .3s ease}.blog-container{min-height:100vh}.progress-bar{position:fixed;top:0;left:0;right:0;height:4px;background:rgba(226,232,240,.3);z-index:50}.dark .progress-bar{background:rgba(71,85,105,.3)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width .15s ease-out}.theme-toggle{position:fixed;top:1.5rem;right:1.5rem;z-index:40;padding:.75rem;background:var(--bg-secondary);backdrop-filter:blur(16px);border:1px solid var(--border-color);border-radius:50%;box-shadow:var(--shadow-lg);cursor:pointer;transition:all .3s ease}.theme-toggle:hover{box-shadow:var(--shadow-xl);transform:scale(1.1)}.theme-icon{width:1.25rem;height:1.25rem;color:var(--text-secondary);transition:color .3s ease}.theme-toggle:hover .theme-icon{color:var(--accent-primary)}.content-wrapper{max-width:112rem;margin:0 auto;padding:2rem 1rem}@media (min-width:640px){.content-wrapper{padding:2rem 1.5rem}}@media (min-width:1024px){.content-wrapper{padding:2rem}}.blog-header{text-align:center;margin-bottom:3rem;padding-top:2rem}.category-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(59,130,246,.1);color:#1d4ed8;border-radius:9999px;font-size:.875rem;font-weight:500;margin-bottom:1.5rem}.dark .category-badge{background:rgba(59,130,246,.2);color:#93c5fd}.category-icon{width:1rem;height:1rem}.blog-title{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#0f172a,#1e40af,#7c3aed);background-clip:text;-webkit-background-clip:text;margin-bottom:1.5rem;line-height:1.1}.blog-title,.dark .blog-title{-webkit-text-fill-color:transparent}.dark .blog-title{background:linear-gradient(135deg,#f1f5f9,#93c5fd,#c4b5fd);background-clip:text;-webkit-background-clip:text}@media (min-width:640px){.blog-title{font-size:3.75rem}}.blog-description{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem;max-width:48rem;margin-left:auto;margin-right:auto;line-height:1.6}.blog-meta{justify-content:center;gap:1.5rem;color:var(--text-muted)}.blog-meta,.meta-item{display:flex;align-items:center}.meta-item{gap:.5rem}.meta-icon{width:1rem;height:1rem}.blog-layout{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width:1024px){.blog-layout{grid-template-columns:1fr 3fr}}.toc-sidebar{order:2}@media (min-width:1024px){.toc-sidebar{order:1}}.toc-sticky{position:sticky;top:2rem}.toc-nav{background:var(--bg-secondary);backdrop-filter:blur(24px);border-radius:var(--radius-2xl);border:1px solid var(--border-color);padding:1.5rem;box-shadow:var(--shadow-lg)}.toc-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.toc-list{list-style:none;padding:0;margin:0}.toc-item{margin-bottom:.5rem}.toc-item-wrapper{display:flex;align-items:center;gap:.5rem}.toc-link{flex:1;display:block;padding:.75rem;border-radius:var(--radius-lg);font-size:.875rem;color:var(--text-secondary);text-decoration:none;transition:all .2s ease}.toc-link:hover{color:var(--text-primary);background:rgba(148,163,184,.1)}.toc-link.active{background:rgba(59,130,246,.1);color:#1d4ed8;font-weight:500}.dark .toc-link.active{background:rgba(59,130,246,.2);color:#93c5fd}.toc-icon{margin-right:.5rem}.toc-toggle{padding:.25rem;border-radius:var(--radius-sm);border:none;background:transparent;cursor:pointer;color:var(--text-muted);transition:all .2s ease}.toc-toggle:hover{background:rgba(148,163,184,.2)}.chevron-icon{width:1rem;height:1rem}.toc-subsections{list-style:none;margin-left:1rem;margin-top:.5rem;padding-left:1rem;border-left:2px solid var(--border-color)}.toc-sublink{display:block;padding:.25rem .75rem;font-size:.75rem;color:var(--text-muted);text-decoration:none;border-radius:var(--radius-sm);transition:color .2s ease}.toc-sublink:hover{color:var(--text-secondary)}.blog-main{order:1}@media (min-width:1024px){.blog-main{order:2}}.blog-article{background:var(--bg-secondary);backdrop-filter:blur(24px);border-radius:var(--radius-2xl);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);overflow:hidden}.article-content{padding:2rem}@media (min-width:640px){.article-content{padding:3rem}}.content-section{margin-bottom:3rem}.content-section:last-child{margin-bottom:0}.section-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.section-icon{font-size:1.5rem}.section-title{font-size:1.875rem;font-weight:700;color:var(--text-primary)}.section-content{max-width:none}.section-body{color:var(--text-secondary);line-height:1.7;margin-bottom:1.5rem;font-size:1.125rem}.highlight-box{background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.2);border-radius:var(--radius-xl);padding:1.5rem;margin-bottom:1.5rem}.dark .highlight-box{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3)}.highlight-text{color:#1e40af;font-weight:500;margin:0}.dark .highlight-text{color:#93c5fd}.subsections{margin-top:2rem}.subsection{padding-left:1.5rem;border-left:2px solid var(--border-color);margin-bottom:2rem}.subsection:last-child{margin-bottom:0}.subsection-title{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.subsection-body{color:var(--text-secondary);line-height:1.7;white-space:pre-line;margin:0}@media (max-width:1023px){.blog-title{font-size:2.5rem}.toc-nav{margin-bottom:2rem}.article-content{padding:1.5rem}.section-title{font-size:1.5rem}.section-body{font-size:1rem}}@media (max-width:639px){.content-wrapper{padding:1rem}.blog-title{font-size:2rem}.blog-description{font-size:1.125rem}.blog-meta{flex-direction:column;gap:.75rem}.theme-toggle{top:1rem;right:1rem}}html{scroll-behavior:smooth}.theme-toggle:focus,.toc-link:focus,.toc-sublink:focus{outline:2px solid var(--accent-primary);outline-offset:2px}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}