:root{--bg-primary:linear-gradient(135deg,#f8fafc 0%,#e0f2fe 100%);--bg-secondary:#fff9;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#64748b;--border-color:#e2e8f099;--accent-primary:#3b82f6;--accent-secondary:#8b5cf6;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem}.dark{--bg-primary:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);--bg-secondary:#1e293b99;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--border-color:#47556999}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-primary);background:var(--bg-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;transition:all .3s}.blog-container{background:var(--bg-primary);min-height:100vh;transition:all .3s}.progress-bar{z-index:50;background:#e2e8f04d;height:4px;position:fixed;top:0;left:0;right:0}.dark .progress-bar{background:#4755694d}.progress-fill{background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));height:100%;transition:width .15s ease-out}.theme-toggle{z-index:40;background:var(--bg-secondary);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);cursor:pointer;border-radius:50%;padding:.75rem;transition:all .3s;position:fixed;top:1.5rem;right:1.5rem}.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}.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{color:#1d4ed8;background:#3b82f61a;border-radius:9999px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;display:inline-flex}.dark .category-badge{color:#93c5fd;background:#3b82f633}.category-icon{width:1rem;height:1rem}.blog-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#0f172a,#1e40af,#7c3aed);-webkit-background-clip:text;background-clip:text;margin-bottom:1.5rem;font-size:3rem;font-weight:700;line-height:1.1}.dark .blog-title{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#f1f5f9,#93c5fd,#c4b5fd);-webkit-background-clip:text;background-clip:text}@media (min-width:640px){.blog-title{font-size:3.75rem}}.blog-description{color:var(--text-secondary);max-width:48rem;margin-bottom:2rem;margin-left:auto;margin-right:auto;font-size:1.25rem;line-height:1.6}.blog-meta{color:var(--text-muted);justify-content:center;align-items:center;gap:1.5rem;display:flex}.meta-item{align-items:center;gap:.5rem;display:flex}.meta-icon{width:1rem;height:1rem}.blog-layout{grid-template-columns:1fr;gap:2rem;display:grid}@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);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-radius:var(--radius-2xl);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);padding:1.5rem}.toc-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.125rem;font-weight:600}.toc-list{margin:0;padding:0;list-style:none}.toc-item{margin-bottom:.5rem}.toc-item-wrapper{align-items:center;gap:.5rem;display:flex}.toc-link{border-radius:var(--radius-lg);color:var(--text-secondary);flex:1;padding:.75rem;font-size:.875rem;text-decoration:none;transition:all .2s;display:block}.toc-link:hover{color:var(--text-primary);background:#94a3b81a}.toc-link.active{color:#1d4ed8;background:#3b82f61a;font-weight:500}.dark .toc-link.active{color:#93c5fd;background:#3b82f633}.toc-icon{margin-right:.5rem}.toc-toggle{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);background:0 0;border:none;padding:.25rem;transition:all .2s}.toc-toggle:hover{background:#94a3b833}.chevron-icon{width:1rem;height:1rem}.toc-subsections{border-left:2px solid var(--border-color);margin-top:.5rem;margin-left:1rem;padding-left:1rem;list-style:none}.toc-sublink{color:var(--text-muted);border-radius:var(--radius-sm);padding:.25rem .75rem;font-size:.75rem;text-decoration:none;transition:color .2s;display:block}.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);-webkit-backdrop-filter:blur(24px);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{align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.section-icon{font-size:1.5rem}.section-title{color:var(--text-primary);font-size:1.875rem;font-weight:700}.section-content{max-width:none}.section-body{color:var(--text-secondary);margin-bottom:1.5rem;font-size:1.125rem;line-height:1.7}.highlight-box{border-radius:var(--radius-xl);background:#3b82f60d;border:1px solid #3b82f633;margin-bottom:1.5rem;padding:1.5rem}.dark .highlight-box{background:#3b82f61a;border-color:#3b82f64d}.highlight-text{color:#1e40af;margin:0;font-weight:500}.dark .highlight-text{color:#93c5fd}.subsections{margin-top:2rem}.subsection{border-left:2px solid var(--border-color);margin-bottom:2rem;padding-left:1.5rem}.subsection:last-child{margin-bottom:0}.subsection-title{color:var(--text-primary);margin-bottom:1rem;font-size:1.25rem;font-weight:600}.subsection-body{color:var(--text-secondary);white-space:pre-line;margin:0;line-height:1.7}@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}.toc-link:focus,.toc-sublink:focus,.theme-toggle:focus{outline:2px solid var(--accent-primary);outline-offset:2px}*{transition:background-color .3s,color .3s,border-color .3s}