:root{--color-white: #fff;--color-link:{accentColor}--color-link-hover: #6bb3ff;--color-code-bg: rgba(255, 255, 255, .05);--color-code-border: rgba(255, 255, 255, .1);--color-border-gray: rgba(255, 255, 255, .5);--opacity-text-secondary: .9;--opacity-border: .1;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-3xl: 2.5rem;--font-size-xs: 1rem;--font-size-sm: 1.4rem;--font-size-md: 1.5rem;--font-size-lg: 2rem;--font-size-xl: 2.2rem;--font-size-2xl: 2.5rem;--font-size-section-title: 1.75rem;--font-weight-semibold: 600;--line-height-heading: 1.2;--size-article-max-width: 1000px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--shadow-code: 0 2px 8px rgba(0, 0, 0, .3);--transition-fast: .2s ease;--z-index-content: 1}.article-container{max-width:var(--size-article-max-width);margin:var(--spacing-3xl) auto;margin-top:calc(var(--spacing-3xl) + 5rem);margin-bottom:calc(var(--spacing-3xl) * 2);background:#ffffff05;position:relative;z-index:var(--z-index-content);overflow:hidden}.blog-article{padding:var(--spacing-3xl) calc(var(--spacing-xl) * 2);padding-bottom:0}.article-header-section{margin-bottom:var(--spacing-3xl)}.article-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-md) 0;line-height:var(--line-height-heading);text-shadow:0 1px 2px rgba(0,0,0,.3);color:var(--color-white)}.article-meta{display:flex;align-items:center;gap:var(--spacing-lg);font-size:var(--font-size-xs);opacity:var(--opacity-text-secondary);flex-wrap:wrap;color:var(--color-white)}.article-meta time{opacity:.5}.article-content{line-height:1.75;font-size:var(--font-size-sm)}.article-content section{margin-bottom:calc(var(--spacing-3xl) * 1.5)}.article-content h2{font-size:var(--font-size-section-title);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-lg) 0;line-height:var(--line-height-heading);text-shadow:0 1px 2px rgba(0,0,0,.3);color:var(--color-link)}.article-content h2:before{content:"# ";color:var(--color-link);text-shadow:0 1px 2px rgba(0,0,0,.3)}.article-content h3{font-size:var(--font-size-section-title);font-weight:var(--font-weight-semibold);margin:var(--spacing-xl) 0 var(--spacing-md) 0;line-height:var(--line-height-heading);color:var(--color-link)}.article-content h3:before{content:"# ";color:var(--color-link)}.article-content p{margin:0 0 var(--spacing-md) 0;color:#d4d4d4;font-size:.9em;line-height:1.75}.article-content p:has(+pre),.article-content p:has(+div pre){color:var(--color-white)}.article-content p:has(+pre):before,.article-content p:has(+div pre):before{content:"</>";display:inline-block;margin-right:.5em;color:var(--color-link);font-family:Noto Sans Mono,monospace;font-weight:600}.article-content ul,.article-content ol{margin:0 0 var(--spacing-md) 0;padding-left:calc(var(--spacing-xl) * 2);color:#d4d4d4;font-size:.9em;line-height:1.75;list-style-type:disc;list-style-position:outside}.article-content ol{list-style-type:decimal}.article-content ul li,.article-content ol li{margin-bottom:var(--spacing-xs);line-height:1.75;color:#d4d4d4;padding-left:var(--spacing-xs)}.article-content ul li::marker,.article-content ol li::marker{font-size:.75em}.article-content code:not(pre code){background:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-sm);padding:.2em .4em;font-size:.9em;font-family:Noto Sans Mono,monospace;color:#6bb3ff}.article-content pre{background:var(--color-code-bg);border:1px solid var(--color-code-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);overflow-x:auto;margin:var(--spacing-lg) 0;box-shadow:var(--shadow-code)}.article-content pre.astro-code{background:var(--color-code-bg)!important;border:1px solid var(--color-code-border)!important;border-radius:var(--radius-lg);padding:var(--spacing-lg);overflow-x:auto;margin:var(--spacing-lg) 0;box-shadow:var(--shadow-code)}.article-content pre code{background:none;border:none;padding:0;font-size:.9em;display:block;white-space:pre;color:#d4d4d4}.article-content pre.astro-code code{background:none!important;border:none!important;padding:0!important;font-size:.9em;display:block;white-space:pre}.article-content a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast)}.article-content a:hover{color:var(--color-link-hover);text-decoration:underline}.article-content .intro{font-size:var(--font-size-sm);margin-bottom:var(--spacing-3xl)}.article-content .intro p{margin-bottom:var(--spacing-md)}.article-content .table-of-contents{margin-bottom:var(--spacing-3xl);padding:var(--spacing-lg);background:#ffffff05;border:1px solid rgba(255,255,255,var(--opacity-border));border-radius:var(--radius-md)}.article-content .table-of-contents h2{font-size:var(--font-size-lg);color:var(--color-link);margin:0 0 var(--spacing-md) 0;text-shadow:0 1px 2px rgba(0,0,0,.3)}.article-content .table-of-contents h2:before{content:none}.article-content .table-of-contents ul{list-style-type:square;padding-left:calc(var(--spacing-xl) * 1.5);margin:0}.article-content .table-of-contents li{margin-bottom:var(--spacing-sm);color:#3a7bc8;list-style-position:outside;padding-left:var(--spacing-xs)}.article-content .table-of-contents li::marker{font-size:.75em}.article-content .table-of-contents li:last-child{margin-bottom:0}.article-content .table-of-contents a{color:#3a7bc8;text-decoration:none;transition:color var(--transition-fast);font-size:.95em}.article-content .table-of-contents a:hover{color:var(--color-link-hover);text-decoration:underline}.article-content .resources{margin-top:var(--spacing-3xl);padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,255,var(--opacity-border))}.article-content .resources h2{color:var(--color-white)}.article-content .resources h2:before{content:none}.article-content .resources ul{list-style:none;padding-left:0}.article-content .resources li{margin-bottom:var(--spacing-sm);margin-left:0;padding-left:0}.article-content .resources a{display:inline-flex;align-items:center;gap:var(--spacing-xs);text-decoration:none;transition:color var(--transition-fast);transform:none}.article-content .resources a:hover{transform:none}.article-content .references{margin-top:var(--spacing-3xl);padding-top:var(--spacing-xl);border-top:1px solid rgba(255,255,255,var(--opacity-border));padding-bottom:0}.article-content .references h2{color:var(--color-white)}.article-content .references h2:before{content:none}.article-content .references ul{list-style:none;padding-left:0}.article-content .references li{margin-bottom:var(--spacing-sm);margin-left:0;padding-left:0}.github-link,.npm-link{display:inline-flex;align-items:center;gap:var(--spacing-xs);text-decoration:none;transition:color var(--transition-fast);transform:none}.github-link{color:var(--color-link)}.github-link:hover{color:var(--color-link-hover);transform:none}.github-link svg{width:20px;height:20px;fill:currentColor}.npm-link{color:#cb3837}.npm-link:hover{color:#e34c26}.npm-link svg{width:20px;height:20px;fill:currentColor}@media (max-width: 768px){.article-container{margin:var(--spacing-xl) var(--spacing-md) 0;margin-top:calc(var(--spacing-xl) + 4rem)}.blog-article{padding:var(--spacing-xl) var(--spacing-md)}.article-header-section h1{font-size:var(--font-size-xl)}.article-content{font-size:var(--font-size-xs)}.article-content h2{font-size:var(--font-size-lg)}.article-content h3{font-size:var(--font-size-md)}.article-content pre{padding:var(--spacing-md);font-size:.85em}}