.code-block{margin:1.5rem 0;position:relative}.code-block .copy-btn{background:var(--background-alt);border:1px solid var(--border-color);cursor:pointer;color:var(--text-muted);z-index:10;border-radius:4px;align-items:center;gap:.25rem;padding:.5rem;font-size:.75rem;transition:all .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.code-block .copy-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.code-block .copy-btn.copied{color:#fff;background:#10b981;border-color:#10b981}.code-block .copy-btn svg{fill:currentColor;width:14px;height:14px}.code-block pre{padding-top:3rem}[data-theme=dark] .code-block .copy-btn{background:var(--background-alt);border-color:var(--border-color);color:var(--text-muted)}[data-theme=dark] .code-block .copy-btn:hover{background:var(--primary-color);color:#fff}.intro-section{background:var(--background-alt);border:1px solid var(--border-color);contain:layout style paint;border-radius:8px;min-height:700px;margin-bottom:2rem;padding:1.5rem}.intro-title{color:var(--primary-color);min-height:1.8rem;margin-top:0;margin-bottom:1rem;font-size:1.5rem;font-weight:600;line-height:1.2}.intro-text{min-height:1.6rem;margin-bottom:1rem;font-size:1rem;font-weight:400;line-height:1.6}.intro-text a,.intro-text-final a{color:var(--text-color);font-weight:500;text-decoration:underline}.intro-text a:hover,.intro-text-final a:hover{color:var(--primary-color)}.intro-text-final{min-height:1.6rem;margin-bottom:0;line-height:1.6}.section-title{color:var(--text-color);min-height:1.35rem;margin:1.5rem 0 .5rem;font-size:1.125rem;font-weight:600;line-height:1.2}.feature-list{min-height:9rem;margin-bottom:1rem;padding-left:1.5rem}.feature-list li{min-height:1.5rem;margin-bottom:.5rem;line-height:1.5}.feature-list li:last-child{margin-bottom:0}.articles-grid{contain:layout style;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:0;display:grid}.article-card{border:1px solid var(--border-color);background:var(--background);contain:layout style paint;will-change:transform;border-radius:8px;flex-direction:column;min-height:280px;padding:1.5rem;transition:box-shadow .2s;display:flex}.article-card:hover{box-shadow:0 4px 6px -1px #0000001a}.article-title{flex-shrink:0;min-height:3rem;margin-bottom:1rem;font-size:1.25rem;font-weight:600;line-height:1.4}.article-title a{color:var(--text-color);text-decoration:none}.article-title a:hover{color:var(--primary-color)}.article-meta{color:var(--text-muted);flex-shrink:0;min-height:1.05rem;margin-bottom:1rem;font-size:.875rem;line-height:1.2}.article-excerpt{text-overflow:ellipsis;max-height:9.6rem;color:var(--text-color);flex-grow:1;min-height:4.8rem;font-size:1rem;line-height:1.6;display:block;overflow:hidden}.article-nav{border-bottom:1px solid var(--border-color);padding:1rem 0}.article-nav a{background:var(--background-alt)!important;border:1px solid var(--border-color)!important;color:var(--text-color)!important;border-radius:6px!important;align-items:center!important;gap:.5rem!important;margin-bottom:1.5rem!important;padding:.75rem 1.5rem!important;font-size:.875rem!important;font-weight:500!important;text-decoration:none!important;transition:all .2s!important;display:inline-flex!important}.article-nav a:hover{background:var(--primary-color)!important;color:#fff!important;border-color:var(--primary-color)!important;align-items:center!important;text-decoration:none!important;display:inline-flex!important}.article-nav a:before{content:"←"!important;font-size:1rem!important}.article-header{border-bottom:1px solid var(--border-color);margin-bottom:2rem;padding-bottom:1rem}.article-header h1{color:var(--text-color);margin-bottom:1rem;font-size:2rem;font-weight:700;line-height:1.2}.article-category{background:var(--primary-color);color:var(--btn-text-color);border-radius:4px;margin-left:.5rem;padding:.25rem .75rem;font-size:.75rem;font-weight:500;display:inline-block}.article-content{font-size:1.125rem;line-height:1.7}.article-content h1{color:var(--text-color);margin:2rem 0 1rem;font-size:2rem;font-weight:700;line-height:1.2}.article-content h2{color:var(--text-color);margin:2rem 0 1rem;font-size:1.75rem;font-weight:700;line-height:1.2}.article-content h3{color:var(--text-color);margin:1.5rem 0 1rem;font-size:1.5rem;font-weight:600;line-height:1.3}.article-content h4{color:var(--text-color);margin:1.5rem 0 .5rem;font-size:1.25rem;font-weight:600;line-height:1.3}.article-content p{margin:1rem 0;line-height:1.7}.article-content ul,.article-content ol{margin:1rem 0;padding-left:2rem}.article-content li{margin-bottom:.5rem}.article-content a{color:var(--text-color);font-weight:500;text-decoration:underline}.article-content a:hover{color:var(--primary-color)}.article-content blockquote{border-left:4px solid var(--primary-color);background:var(--background-alt);border-radius:4px;margin:1.5rem 0;padding:1rem}.article-content pre{background:var(--background-alt);border:1px solid var(--border-color);border-radius:8px;margin:1.5rem 0;padding:1rem;font-size:.875rem;line-height:1.5;overflow-x:auto}.article-content code{background:var(--background-alt);border-radius:4px;padding:.125rem .25rem;font-size:.875rem}.article-content pre code{background:0 0;padding:0}.article-intro{margin-bottom:2rem;font-size:1.125rem;line-height:1.7}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.feature-card{border:1px solid var(--border-color);background:var(--background-alt);border-radius:8px;padding:1.5rem}.feature-card h3{color:var(--text-color);margin-bottom:.75rem;font-size:1.125rem;font-weight:600}.feature-card p{color:var(--text-muted);margin:0;font-size:.875rem;line-height:1.5}.feature-card ul{color:var(--text-muted);margin:0;padding-left:1.25rem;font-size:.875rem;line-height:1.5}.feature-card li{margin-bottom:.5rem}.feature-card li:last-child{margin-bottom:0}.comparison-table{border-collapse:collapse;width:100%;margin:2rem 0}.comparison-table th,.comparison-table td{border:1px solid var(--border-color);text-align:left;padding:.75rem}.comparison-table th{background:var(--background-alt);font-weight:600}.badge{background:var(--primary-color);color:#fff;border-radius:4px;padding:.25rem .5rem;font-size:.75rem;font-weight:500;display:inline-block}.release-section{background:var(--background-alt);border:1px solid var(--border-color);border-radius:8px;margin:2rem 0;padding:1.5rem}.release-section h2{margin-top:0}[data-theme=dark] .article-card{background:var(--background-alt);border-color:var(--border-color)}[data-theme=dark] .article-card:hover{box-shadow:0 4px 6px -1px #0000004d}@media (prefers-color-scheme:dark){.article-card{background:var(--background-alt);border-color:var(--border-color)}.article-card:hover{box-shadow:0 4px 6px -1px #0000004d}}@media (width<=768px){.intro-section{min-height:600px;padding:1.25rem}.articles-grid{grid-template-columns:1fr;gap:1rem}.article-card{contain:layout style paint size;min-height:350px;padding:1.25rem}.comparison-table{white-space:nowrap;font-size:.875rem;display:block;overflow-x:auto}.comparison-table th,.comparison-table td{min-width:120px;padding:.5rem}.feature-grid{grid-template-columns:1fr}.feature-card{margin-bottom:1rem}.release-section{margin:1rem 0;padding:1rem}.badge{padding:.2rem .4rem;font-size:.7rem}}@media (width>=769px) and (width<=1200px){.articles-grid{grid-template-columns:1fr 1fr}}@media (width>=769px){.intro-section{min-height:700px}}body.articles-page{padding-top:120px!important}body.articles-page h1{min-height:4.8rem}body.articles-page .main{min-height:1600px}.back-to-home{background:var(--background-alt);border:1px solid var(--border-color);color:var(--text-color);border-radius:6px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex}.back-to-home:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.back-to-home:before{content:"←";font-size:1rem}.article-card{cursor:pointer!important;transition:all .3s!important;position:relative!important}.article-card:hover{border-color:var(--primary-color)!important;transform:translateY(-4px)!important;box-shadow:0 8px 25px #00000026!important}.article-card:active{transform:translateY(-2px)!important;box-shadow:0 4px 15px #0003!important}.article-card:after{content:"→"!important;opacity:0!important;color:var(--primary-color)!important;font-size:1.2rem!important;font-weight:700!important;transition:opacity .3s!important;position:absolute!important;top:1.5rem!important;right:1.5rem!important}.article-card:hover:after{opacity:1!important}.article-card:hover .article-title a{color:var(--primary-color)!important}.article-title a:before{content:"";z-index:1;position:absolute;inset:0}@media (width<=768px){body.articles-page{padding-top:100px!important}body.articles-page .main{min-height:1800px}}@media (width>=769px){body.articles-page .main{min-height:1600px}}.feature-cards-container{flex-wrap:wrap;gap:1.5rem;margin:1rem 0;display:flex}.feature-cards-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.feature-card-inline{border:1px solid var(--border-color);background:var(--background-alt);border-radius:8px;flex:250px;min-width:250px;max-width:calc(50% - .75rem);padding:1.5rem}.feature-card-inline-lg{border:1px solid var(--border-color);background:var(--background-alt);border-radius:8px;flex:300px;min-width:300px;max-width:calc(50% - .75rem);padding:1.5rem}.feature-card-grid{border:1px solid var(--border-color);background:var(--background-alt);border-radius:8px;padding:1.5rem}.feature-card-column{border:1px solid var(--border-color);background:var(--background-alt);border-radius:8px;flex-direction:column;flex:250px;min-width:250px;padding:1.5rem;display:flex}.feature-card-inline h3,.feature-card-inline-lg h3,.feature-card-grid h3,.feature-card-column h3{color:var(--text-color);margin-bottom:.75rem;font-size:1.125rem;font-weight:600}.feature-card-grid h3{align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}@media (width<=768px){.feature-card-inline,.feature-card-inline-lg,.feature-card-column{flex:100%;max-width:100%}.feature-cards-grid{grid-template-columns:1fr}}
