.blog-detail-container{padding:2rem 0 4rem;max-width:1100px}.interactive-component-wrapper{margin:3rem 0;width:100%;border-radius:12px;overflow:hidden}.interactive-component-wrapper>*{width:100%}.back-link{color:var(--accent-color);text-decoration:none;font-weight:500;transition:all .3s ease;display:inline-block;margin-bottom:2rem;padding:.5rem 1rem;border-radius:8px;background:var(--card-bg));border:1px solid var(--card-border));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.back-link:hover{color:var(--accent-color);transform:translate(-5px);border-color:var(--accent-color);background:var(--card-bg))}.blog-detail-header{border-bottom:2px solid var(--card-border));padding-bottom:2rem;margin-bottom:2rem}.blog-detail-title{font-size:2.5rem;font-weight:700;line-height:1.3;color:var(--text-color)}.blog-detail-image{max-height:500px;object-fit:cover;box-shadow:0 4px 12px #0000001a}.blog-tags{display:flex;flex-wrap:wrap;gap:8px}.blog-detail-content{font-size:1.1rem;line-height:1.8;color:var(--text-color-2);background:var(--card-bg));border:1px solid var(--card-border));border-radius:12px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:2rem}.blog-detail-content h1,.blog-detail-content h2,.blog-detail-content h3{margin-top:2rem;margin-bottom:1rem;font-weight:600}.blog-detail-content h1{font-size:2rem;border-bottom:2px solid var(--card-border));padding-bottom:.5rem;color:var(--text-color)}.blog-detail-content h2{font-size:1.6rem;color:var(--accent-color)}.blog-detail-content h3{font-size:1.3rem;color:var(--text-color)}.blog-detail-content h4{font-size:1.1rem;color:var(--text-color)}.blog-detail-content p{margin-bottom:1.5rem}.blog-detail-content ul,.blog-detail-content ol{margin-bottom:1.5rem;padding-left:2rem;color:var(--text-color-2)}.blog-detail-content li{margin-bottom:.75rem;line-height:1.7;color:var(--text-color-2)}.blog-detail-content ul li{list-style-type:disc}.blog-detail-content ol li{list-style-type:decimal}.blog-detail-content li p{margin-bottom:.5rem}.blog-detail-content li a{color:var(--accent-color);text-decoration:underline;text-underline-offset:2px}.blog-detail-content code{background-color:#00d9ff1a;padding:2px 6px;border-radius:3px;font-family:Courier New,Courier,monospace;font-size:.95em;color:var(--accent-color)}.code-block-wrapper{position:relative;margin:1.5rem 0;border-radius:8px;overflow:hidden;background-color:#1e1e1e;border:1px solid var(--card-border))}[data-theme=light] .code-block-wrapper{background-color:var(--bg-raised);border-color:var(--card-border))}.code-block-wrapper:hover .copy-button,.code-block-wrapper .copy-button.copied{opacity:1}.copy-button{position:absolute;top:10px;right:10px;background-color:#000000b3;color:var(--accent-ink);border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:6px 12px;font-size:.85rem;cursor:pointer;opacity:.7;transition:all .3s ease;z-index:10;display:flex;align-items:center;gap:6px;font-family:Inter,sans-serif;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.copy-button:hover{background-color:#000c;border-color:#fff6}.copy-button.copied{background-color:var(--accent);border-color:var(--accent);opacity:1}.copy-button svg{width:14px;height:14px}.blog-detail-content pre{background-color:transparent;padding:1.5rem;margin:0;overflow-x:auto;border-radius:0}.blog-detail-content pre code{background-color:transparent;color:#d4d4d4;padding:0;font-size:.9rem;font-family:Fira Code,Courier New,Courier,monospace}.blog-detail-content pre[class*=language-]{background-color:#1e1e1e;padding:1.5rem;border-radius:8px;overflow-x:auto;margin:0}[data-theme=light] .blog-detail-content pre[class*=language-]{background-color:var(--bg-raised)}[data-theme=light] .copy-button{background-color:#ffffffe6;color:var(--bg-raised);border-color:#0003}[data-theme=light] .copy-button:hover{background-color:#fff;border-color:#0000004d}@media (prefers-color-scheme: dark){.code-block-wrapper,.blog-detail-content pre[class*=language-]{background-color:#1e1e1e}}.blog-detail-content blockquote{border-left:4px solid var(--accent-color);padding-left:1.5rem;margin:1.5rem 0;font-style:italic;color:var(--text-color-2);background:var(--card-bg));padding:1rem 1.5rem;border-radius:8px}.blog-detail-content img{max-width:100%;height:auto;border-radius:8px;margin:1.5rem 0}.blog-detail-content a{color:var(--accent-color);text-decoration:none;border-bottom:1px solid transparent;transition:all .3s ease;font-weight:500}.blog-detail-content a:hover{border-bottom-color:var(--accent-color);color:var(--accent-color)}.blog-detail-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem;box-shadow:0 2px 8px #0000001a;overflow-x:auto;display:block;border-radius:8px;overflow:hidden}.blog-detail-content table thead{background-color:var(--bg-raised)}.blog-detail-content table th{padding:12px 16px;text-align:left;font-weight:600;border-bottom:2px solid var(--line);color:var(--ink);background-color:var(--bg-raised)}.blog-detail-content table td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink);background-color:var(--surface)}.blog-detail-content table tbody tr:hover{background-color:var(--bg-raised)}.blog-detail-content table tbody tr:hover td{color:var(--ink);background-color:var(--bg-raised)}.blog-detail-content table tbody tr:last-child td{border-bottom:none}@media (prefers-color-scheme: dark){.blog-detail-content table thead,.blog-detail-content table th{background-color:var(--table-header-bg, var(--bg-raised));color:var(--table-header-text, var(--ink));border-bottom-color:var(--line)}.blog-detail-content table td{background-color:var(--table-cell-bg, var(--surface));color:var(--text-color);border-bottom-color:var(--line)}.blog-detail-content table tbody tr:hover{background-color:var(--table-row-hover, var(--bg-raised))}.blog-detail-content table tbody tr:hover td{color:var(--text-color);background-color:var(--table-row-hover, var(--bg-raised))}}@media (max-width: 768px){.blog-detail-content table{font-size:.85rem}.blog-detail-content table th,.blog-detail-content table td{padding:8px 12px}}.blog-detail-content ul a,.blog-detail-content ol a,[data-theme=dark] .blog-detail-content a,[data-theme=dark] .blog-detail-content ul a,[data-theme=dark] .blog-detail-content ol a{color:var(--accent-color)}[data-theme=dark] .blog-detail-content a:hover{color:var(--accent-color);border-bottom-color:var(--accent-color)}@media (prefers-color-scheme: dark){.blog-detail-content a,.blog-detail-content ul a,.blog-detail-content ol a{color:var(--accent-color)}.blog-detail-content a:hover{color:var(--accent-color);border-bottom-color:var(--accent-color)}}.blog-detail-footer{padding:0}.blog-author-box{background:var(--card-bg));border:1px solid var(--card-border));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.blog-author-box h5{color:var(--text-color);font-weight:600}.blog-author-box .fw-bold{color:var(--text-color)}.blog-author-box .text-muted{color:var(--text-color-2);opacity:.8}.blog-author-box a{color:var(--accent-color);text-decoration:none;transition:color .3s ease}.blog-author-box a:hover{color:var(--accent-color)}.related-posts h5{color:var(--text-color);font-weight:600}[data-theme=dark] .blog-detail-content h1,[data-theme=dark] .blog-detail-content h3,[data-theme=dark] .blog-detail-content h4{color:var(--text-color)}[data-theme=dark] .blog-detail-content h2{color:var(--accent-color)}@media (max-width: 768px){.blog-detail-title{font-size:1.8rem}.blog-detail-content{font-size:1rem}.blog-detail-content h1{font-size:1.6rem}.blog-detail-content h2{font-size:1.4rem}.blog-detail-content h3{font-size:1.2rem}}.youtube-embed-wrapper{display:block;position:relative;width:100%;aspect-ratio:16 / 9;margin:1.5rem 0;border-radius:8px;overflow:hidden;background:#000}.youtube-embed-wrapper iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.tldr-box{background:linear-gradient(135deg,#00d9ff14,#00d9ff08);border:1px solid var(--accent-color, #00d9ff);border-left:4px solid var(--accent-color, #00d9ff);border-radius:8px;padding:1.5rem;margin:1.5rem 0 2rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tldr-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.tldr-icon{font-size:1.25rem}.tldr-title{font-size:1.1rem;font-weight:700;color:var(--accent-color, #00d9ff);margin:0;text-transform:uppercase;letter-spacing:.5px}.tldr-summary{font-size:1rem;line-height:1.6;color:var(--text-color, #ffffff);margin:0 0 1rem;font-weight:500}.tldr-points{list-style:none;padding:0;margin:0 0 1rem}.tldr-point{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.5rem;color:var(--text-color-2, #b0b0b0);font-size:.95rem;line-height:1.5}.tldr-point:last-child{margin-bottom:0}.tldr-bullet{color:var(--accent-color, #00d9ff);flex-shrink:0;font-weight:700}.tldr-readmore{font-size:.85rem;color:var(--text-color-2, #b0b0b0);margin:1rem 0 0;font-style:italic;opacity:.8}[data-theme=light] .tldr-box{background:linear-gradient(135deg,#0096c814,#0096c808);border-color:var(--accent-color, #0096c8)}[data-theme=light] .tldr-summary{color:var(--text-color, #1a1a1a)}[data-theme=light] .tldr-point{color:var(--text-color-2, #444444)}@media (max-width: 768px){.tldr-box{padding:1rem;margin:1rem 0 1.5rem}.tldr-title{font-size:1rem}.tldr-summary{font-size:.95rem}.tldr-point{font-size:.9rem}}@media (prefers-reduced-motion: no-preference){.tldr-box{animation:tldrFadeIn .3s ease-out}}@keyframes tldrFadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.breadcrumbs{padding:.75rem 0;margin-bottom:1rem}.breadcrumbs-list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0;font-size:.875rem}.breadcrumbs-item{display:flex;align-items:center}.breadcrumbs-link{color:var(--text-color-2, #a0a0a0);text-decoration:none;transition:color .2s ease;padding:.25rem 0}.breadcrumbs-link:hover{color:var(--accent-color, #00d9ff);text-decoration:underline}.breadcrumbs-separator{margin:0 .5rem;color:var(--text-color-2, #a0a0a0);opacity:.5;font-size:1rem}.breadcrumbs-current{color:var(--text-color, #ffffff);font-weight:500}@media (max-width: 640px){.breadcrumbs{padding:.5rem 0}.breadcrumbs-list{font-size:.8rem}.breadcrumbs-separator{margin:0 .35rem}}