html,body{overflow-x:hidden;max-width:100vw}:root{--blog-font-family: "Inter", system-ui, sans-serif;--blog-heading-font: "Melodrama", serif;--blog-font-size: 1.0625rem;--blog-font-size-desktop: 1.125rem;--blog-h2-size: 1.5rem;--blog-h2-size-desktop: 1.75rem;--blog-h3-size: 1.25rem;--blog-h3-size-desktop: 1.375rem;--blog-h4-size: 1.125rem;--blog-line-height: 1.6;--blog-content-width: 720px}html[data-blog-font=serif]{--blog-font-family: "Times New Roman", Times, "Noto Serif", Georgia, serif}html[data-blog-size=small]{--blog-font-size: .9375rem;--blog-font-size-desktop: 1rem;--blog-h2-size: 1.375rem;--blog-h2-size-desktop: 1.5rem;--blog-h3-size: 1.125rem;--blog-h3-size-desktop: 1.25rem;--blog-h4-size: 1rem}html[data-blog-size=large]{--blog-font-size: 1.1875rem;--blog-font-size-desktop: 1.25rem;--blog-h2-size: 1.75rem;--blog-h2-size-desktop: 2rem;--blog-h3-size: 1.5rem;--blog-h3-size-desktop: 1.625rem;--blog-h4-size: 1.25rem}html[data-blog-line-height=normal]{--blog-line-height: 1.8}html[data-blog-line-height=relaxed]{--blog-line-height: 2}html[data-blog-width=narrow]{--blog-content-width: 600px}html[data-blog-width=wide]{--blog-content-width: 900px}.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background-color:transparent}.reading-progress-bar{height:100%;width:0%;background-color:var(--accent);transition:width .1s linear}.blog-header{position:fixed;top:3px;left:0;right:0;z-index:1000;height:56px;pointer-events:none}.blog-header-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;height:100%;margin:0 auto;padding:0 1rem;pointer-events:auto}.back-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:.5rem;background-color:color-mix(in srgb,var(--bg-primary) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:all .2s ease}.back-link:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.blog-header-controls{display:flex;align-items:center;gap:.25rem;padding:.25rem;background-color:color-mix(in srgb,var(--bg-primary) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:.5rem}.text-toggle{position:relative}.text-toggle-trigger{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;background:transparent;border:none;color:var(--text-secondary);border-radius:.5rem;cursor:pointer;transition:all .2s ease}.text-toggle-trigger:hover{color:var(--text-primary);background-color:var(--bg-tertiary)}.text-toggle-panel{position:absolute;top:calc(100% + .5rem);right:0;width:280px;padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:.75rem;box-shadow:0 4px 12px var(--shadow);opacity:0;visibility:hidden;transform:translateY(-.5rem);transition:all .2s ease;z-index:100}@media(max-width:768px){.text-option-width{display:none}}.text-toggle.open .text-toggle-panel{opacity:1;visibility:visible;transform:translateY(0)}.text-option-group{margin-bottom:1rem}.text-option-group:last-child{margin-bottom:0}.text-option-label{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.text-option-buttons{display:flex;gap:.25rem;padding:.25rem;background-color:var(--bg-tertiary);border-radius:.5rem}.text-option-btn{flex:1;padding:.5rem;font-size:.75rem;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:.375rem;cursor:pointer;transition:all .2s ease}.text-option-btn:hover{color:var(--text-secondary)}.text-option-btn.active{color:var(--text-primary);background-color:var(--bg-primary);box-shadow:0 1px 3px var(--shadow)}.blog-layout{display:flex;justify-content:center;gap:1rem;max-width:1400px;margin:0 auto;padding-top:70px}.toc-container{width:220px;flex-shrink:0;padding-top:1rem}.blog-spacer{width:220px;flex-shrink:0}@media(max-width:1280px){.blog-layout{display:block;max-width:100%;padding:70px 1.5rem 0}.toc-container,.blog-spacer{display:none}.article-container{width:100%}}@media(max-width:768px){.blog-layout{padding:60px 1rem 0}}.toc-container::-webkit-scrollbar{width:4px}.toc-container::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:2px}.toc-title{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem;padding-left:.75rem}.toc-list{list-style:none;padding:0;margin:0}.toc-item{margin-bottom:.125rem}.toc-link{display:block;padding:.375rem .75rem;font-size:.8125rem;color:var(--text-muted);text-decoration:none;border-left:2px solid transparent;transition:all .2s ease;line-height:1.4}.toc-link:hover{color:var(--text-primary)}.toc-link.active{color:var(--accent);border-left-color:var(--accent);background-color:color-mix(in srgb,var(--accent) 8%,transparent)}.toc-link.toc-h3{padding-left:1.25rem;font-size:.75rem}.article-container{flex:0 1 var(--blog-content-width);width:100%;max-width:var(--blog-content-width);padding:0 0 2rem;transition:max-width .3s ease;overflow-x:hidden}@media(max-width:1280px){.article-container{max-width:100%}}.hero-image-wrapper{margin:0 0 2rem;overflow:hidden;border-radius:.75rem}.hero-image-wrapper img{width:100%;height:auto;max-height:350px;object-fit:cover;margin:0;border-radius:.75rem}@media(max-width:768px){.hero-image-wrapper{margin:0 0 1.5rem;border-radius:.5rem}.hero-image-wrapper img{max-height:200px;border-radius:.5rem}}.article-header{text-align:center;margin-bottom:2rem}.article-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;font-size:.875rem;color:var(--text-muted)}.article-title{margin:0 0 1rem;font-family:var(--blog-heading-font);font-size:1.75rem;font-weight:700;line-height:1.2;color:var(--text-primary);word-wrap:break-word;overflow-wrap:break-word}@media(min-width:640px){.article-title{font-size:2.25rem}}@media(min-width:768px){.article-title{font-size:2.5rem}}.article-description{font-size:1rem;color:var(--text-secondary);margin:0}@media(min-width:640px){.article-description{font-size:1.0625rem}}.project-links{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.25rem}.project-link{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:1px solid var(--border);border-radius:.375rem;background:var(--bg-secondary);color:var(--text-secondary);text-decoration:none;transition:all .2s}.project-link:hover{border-color:var(--accent);color:var(--accent)}.project-link.primary{background:var(--accent);border-color:var(--accent);color:#fff}.project-link.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.article-divider{margin:2rem 0;border:none;border-top:1px solid var(--border)}.article-content{font-family:var(--blog-font-family);font-size:var(--blog-font-size);line-height:var(--blog-line-height);color:var(--text-secondary);transition:font-family .3s ease,line-height .3s ease,font-size .3s ease}@media(min-width:640px){.article-content{font-size:var(--blog-font-size-desktop)}}.article-content p{margin-bottom:1.5rem}.article-content h2{margin-top:2.5rem;margin-bottom:1rem;font-family:var(--blog-heading-font);font-size:var(--blog-h2-size);font-weight:700;color:var(--text-primary);padding-bottom:.5rem;border-bottom:1px solid var(--border);transition:font-size .3s ease}@media(min-width:640px){.article-content h2{font-size:var(--blog-h2-size-desktop)}}.article-content h3{margin-top:2rem;margin-bottom:.75rem;font-family:var(--blog-heading-font);font-size:var(--blog-h3-size);font-weight:700;color:var(--text-primary);transition:font-size .3s ease}@media(min-width:640px){.article-content h3{font-size:var(--blog-h3-size-desktop)}}.article-content h4{margin-top:1.5rem;margin-bottom:.5rem;font-family:var(--blog-heading-font);font-size:var(--blog-h4-size);font-weight:700;color:var(--text-primary);transition:font-size .3s ease}.article-content ul,.article-content ol{margin-bottom:1.5rem;padding-left:1.5rem}.article-content ul{list-style-type:disc}.article-content ol{list-style-type:decimal}.article-content li{margin-bottom:.5rem;padding-left:.25rem}.article-content li::marker{color:var(--text-muted)}.article-content blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background-color:var(--bg-secondary);border-left:4px solid var(--accent);border-radius:0 .5rem .5rem 0}.article-content blockquote p:last-child{margin-bottom:0}@media(max-width:768px){.article-content blockquote{padding:.875rem 1rem}}.article-content img{display:block;max-width:100%;height:auto;margin:1.5rem auto;border-radius:.5rem}.article-content figure{margin:1.5rem 0;text-align:center}.article-content figure img{margin:0 auto .75rem}.article-content figcaption{font-size:.875rem;color:var(--text-muted);font-style:italic}.code-block-wrapper{position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;background-color:var(--code-bg)}.code-block-meta{position:absolute;top:.5rem;right:.5rem;display:flex;align-items:center;gap:.75rem;z-index:1}.code-block-language{font-size:.6875rem;font-weight:500;color:var(--code-lang-color);text-transform:uppercase;letter-spacing:.03em}.code-copy-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.6875rem;font-weight:500;color:var(--code-lang-color);background-color:transparent;border:none;border-radius:.25rem;cursor:pointer;transition:color .2s ease}.code-copy-btn:hover{color:var(--text-primary)}.code-copy-btn.copied{color:#22c55e}.article-content pre{margin:0;padding:2rem 1rem 1rem;border-radius:.5rem;overflow-x:auto;font-size:.8125rem;line-height:1.6;-webkit-overflow-scrolling:touch}.article-content pre code{font-family:SF Mono,Fira Code,Monaco,Consolas,monospace;background:transparent!important}.article-content pre.astro-code{background-color:var(--code-bg)}@media(max-width:768px){.article-content pre{font-size:.75rem;padding:2rem 1rem 1rem}}:root{--code-bg: #f6f8fa;--code-lang-color: #656d76}[data-theme=dark]{--code-bg: #161b22;--code-lang-color: #7d8590}[data-theme=paper]{--code-bg: #f5f0e6;--code-lang-color: #7a6f5a}[data-theme=dark] .astro-code,[data-theme=dark] .astro-code span{color:var(--shiki-dark)!important}.astro-code span{background-color:transparent!important}.katex-display{margin:1.5rem 0;overflow-x:auto;overflow-y:hidden;padding:.5rem 0;-webkit-overflow-scrolling:touch}@media(max-width:768px){.katex-display{margin:1rem -1rem;padding:.5rem 1rem}}.katex{font-size:1.1em;color:inherit}.katex-display>.katex{font-size:1.15em}@media(max-width:480px){.katex{font-size:1em}.katex-display>.katex{font-size:1em}}.concept-check{margin:1.5rem 0;background-color:var(--bg-secondary);border-radius:.75rem;overflow:hidden}.concept-question{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem}.concept-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;font-size:.875rem;font-weight:600;color:var(--accent);background-color:color-mix(in srgb,var(--accent) 15%,transparent);border-radius:50%}.concept-question-text{flex:1;font-weight:500;color:var(--text-primary);line-height:1.5}.concept-question-text p{margin:0}.concept-question-text .katex,.concept-question-text .katex *{color:var(--text-primary)!important}.concept-answer{padding:0 1.25rem 1rem;cursor:pointer}.concept-answer-content{transition:filter .3s ease}.concept-answer-content p:last-child{margin-bottom:0}.concept-answer[data-blurred=true] .concept-answer-content{filter:blur(5px);user-select:none}.concept-answer[data-blurred=true]:hover .concept-answer-content{filter:blur(4px)}@media(max-width:768px){.concept-question{padding:.875rem 1rem;gap:.625rem}.concept-answer{padding:0 1rem .875rem}.concept-icon{width:1.25rem;height:1.25rem;font-size:.75rem}}.video-embed{margin:1.5rem 0}.video-container{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:.5rem;background-color:var(--bg-tertiary)}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.video-title{margin-top:.5rem;font-size:.8125rem;color:var(--text-muted);text-align:center}.video-error{display:flex;align-items:center;justify-content:center;height:150px;background-color:var(--bg-secondary);border-radius:.5rem;color:var(--text-muted);font-size:.875rem}@media(max-width:768px){.video-embed{margin-left:-1rem;margin-right:-1rem}.video-container{border-radius:0}.video-title{padding:0 1rem}}.post-engagement{display:flex;justify-content:center;margin:2rem 0}.engagement-stats{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.25rem;background-color:var(--bg-secondary);border-radius:2rem;border:1px solid var(--border)}@media(max-width:480px){.engagement-stats{gap:1rem;padding:.625rem 1rem}}.view-counter{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.875rem}.view-icon{width:1.125rem;height:1.125rem;flex-shrink:0}.view-count{font-weight:500;min-width:1.5rem}.like-button{display:flex;align-items:center;gap:.5rem;padding:0;background:none;border:none;color:var(--text-muted);font-size:.875rem;font-weight:500;cursor:pointer;transition:color .2s ease}.like-button:hover{color:var(--text-secondary)}.like-button:hover .like-icon{color:#ef4444}.like-icon{width:1.125rem;height:1.125rem;flex-shrink:0;transition:all .2s ease}.like-button.liked{color:#ef4444}.like-button.liked .like-icon{fill:#ef4444;stroke:#ef4444}.like-button.animating .like-icon{animation:heartPulse .3s ease}@keyframes heartPulse{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.like-count{min-width:1.5rem}.comment-section{margin-top:2rem}.comments-title{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-family:var(--blog-heading-font);font-size:1.5rem;font-weight:700;color:var(--text-primary)}.comments-count{color:var(--text-muted);font-weight:400}.auth-section{margin-bottom:1.5rem}.auth-logged-out{display:flex;justify-content:center}.google-signin-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.5rem;background-color:var(--bg-primary);border:1px solid var(--border);border-radius:.5rem;color:var(--text-primary);font-size:.9375rem;font-weight:500;cursor:pointer;transition:all .2s ease}.google-signin-btn:hover{background-color:var(--bg-secondary);border-color:var(--text-muted)}.google-signin-btn:disabled{opacity:.6;cursor:not-allowed}.google-icon{width:1.25rem;height:1.25rem;flex-shrink:0}.auth-logged-in{display:flex;justify-content:center}.user-info{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background-color:var(--bg-secondary);border-radius:2rem}.user-avatar{width:2rem;height:2rem;border-radius:50%;object-fit:cover}.user-name{font-size:.875rem;font-weight:500;color:var(--text-primary)}.signout-btn{padding:.375rem .75rem;background:none;border:1px solid var(--border);border-radius:.375rem;color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:all .2s ease}.signout-btn:hover{border-color:var(--text-muted);color:var(--text-secondary)}.comment-form{margin-bottom:2rem}.comment-input-wrapper{display:flex;gap:.75rem;align-items:flex-start}.comment-form-avatar{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}.comment-textarea{flex:1;padding:.75rem 1rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:.5rem;color:var(--text-primary);font-family:inherit;font-size:.9375rem;line-height:1.5;resize:vertical;min-height:80px;transition:border-color .2s ease}.comment-textarea:focus{outline:none;border-color:var(--accent)}.comment-textarea::placeholder{color:var(--text-muted)}.comment-form-actions{display:flex;justify-content:flex-end;margin-top:.75rem}.submit-comment-btn{padding:.5rem 1.25rem;background-color:var(--accent);border:none;border-radius:.375rem;color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease}.submit-comment-btn:hover{background-color:var(--accent-hover)}.submit-comment-btn:disabled{opacity:.6;cursor:not-allowed}@media(max-width:480px){.comment-form-avatar{display:none}}.comments-list{display:flex;flex-direction:column;gap:1.25rem}.comment-item{padding-left:0}.comment-item.depth-1{padding-left:2rem}.comment-item.depth-2{padding-left:4rem}.comment-item.depth-3{padding-left:5rem}@media(max-width:640px){.comment-item.depth-1{padding-left:1rem}.comment-item.depth-2,.comment-item.depth-3{padding-left:1.5rem}}.comment-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.comment-avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex-shrink:0}.comment-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}.comment-author{font-size:.9375rem;font-weight:600;color:var(--text-primary)}.comment-time{font-size:.8125rem;color:var(--text-muted)}.comment-body{padding-left:3rem}@media(max-width:480px){.comment-body{padding-left:0}}.comment-content{margin-bottom:.5rem}.comment-content p{margin:0;color:var(--text-secondary);font-size:.9375rem;line-height:1.6;white-space:pre-wrap;word-break:break-word}.comment-actions{display:flex;gap:.75rem;margin-bottom:.5rem}.comment-actions button{padding:0;background:none;border:none;color:var(--text-muted);font-size:.8125rem;cursor:pointer;transition:color .2s ease}.comment-actions button:hover{color:var(--accent)}.comment-delete-btn:hover{color:#ef4444!important}.reply-form{margin-top:.75rem;margin-bottom:.75rem}.reply-form textarea{width:100%;padding:.625rem .875rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:.375rem;color:var(--text-primary);font-family:inherit;font-size:.875rem;line-height:1.5;resize:vertical}.reply-form textarea:focus{outline:none;border-color:var(--accent)}.reply-form textarea::placeholder{color:var(--text-muted)}.reply-actions{display:flex;justify-content:flex-end;margin-top:.5rem}.reply-actions button{padding:.375rem 1rem;background-color:var(--accent);border:none;border-radius:.25rem;color:#fff;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background-color .2s ease}.reply-actions button:hover{background-color:var(--accent-hover)}.reply-actions button:disabled{opacity:.6;cursor:not-allowed}.edit-form{margin-bottom:.5rem}.edit-form textarea{width:100%;padding:.625rem .875rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:.375rem;color:var(--text-primary);font-family:inherit;font-size:.9375rem;line-height:1.5;resize:vertical}.edit-form textarea:focus{outline:none;border-color:var(--accent)}.edit-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.5rem}.edit-actions button{padding:.375rem .875rem;border-radius:.25rem;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease}.edit-cancel-btn{background:none;border:1px solid var(--border);color:var(--text-secondary)}.edit-cancel-btn:hover{border-color:var(--text-muted)}.edit-actions button[type=submit]{background-color:var(--accent);border:none;color:#fff}.edit-actions button[type=submit]:hover{background-color:var(--accent-hover)}.comment-replies{margin-top:1rem;padding-left:.5rem;border-left:2px solid var(--border)}.comments-loading{display:flex;justify-content:center;padding:2rem}.loading-spinner{width:2rem;height:2rem;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.comments-empty{text-align:center;padding:2rem;color:var(--text-muted)}.comments-empty p{margin:0;font-size:.9375rem}