.nav-links a.active{color:var(--text)}
.btn-dark:hover{background:var(--btn-fill-hover);transform:translateY(-1px);text-decoration:none}
.article-container{max-width:900px;margin:0 auto;padding:7rem 1.5rem 3rem}
.article-back{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--dim);margin-bottom:2rem;transition:color .15s}
.article-back:hover{color:var(--text);text-decoration:none}
.article-header{margin-bottom:2.5rem}
.article-header h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:900;letter-spacing:-.04em;line-height:1.15;margin-bottom:1rem}
.article-meta{display:flex;align-items:center;gap:.75rem;font-size:.78rem;color:var(--muted);margin-bottom:1rem;flex-wrap:wrap}
.article-meta svg{width:14px;height:14px;flex-shrink:0}
.article-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.article-tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;padding:.2rem .55rem;border-radius:4px;font-weight:600;background:rgba(37,99,235,.06);color:var(--blue);border:1px solid rgba(37,99,235,.12)}
.prose h2{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;margin:2.5rem 0 .8rem;line-height:1.3}
.prose p{font-size:.95rem;color:var(--dim);line-height:1.85;margin-bottom:1.2rem}
.prose strong{color:var(--text);font-weight:600}
.article-cta{background:var(--dark);border-radius:var(--radius);padding:2.5rem;text-align:center;margin:3rem 0;position:relative;overflow:hidden}
.article-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(37,99,235,.15),transparent 60%);pointer-events:none}
.article-cta h3{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:.4rem;position:relative}
.article-cta p{color:rgba(255,255,255,.5);font-size:.88rem;margin-bottom:1.5rem;position:relative}
.article-cta .btn-dark{position:relative;padding:.7rem 2rem;font-size:.88rem}
.suggestions{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.suggestions h3{font-size:.95rem;font-weight:700;margin-bottom:1rem}
.suggestions-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.suggestion-card{display:block;padding:1.2rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);transition:all .2s;text-decoration:none}
.suggestion-card:hover{border-color:var(--border2);transform:translateY(-1px);text-decoration:none}
.suggestion-card h4{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.suggestion-card p{font-size:.78rem;color:var(--dim);line-height:1.55}
.suggestion-card .s-tags{display:flex;gap:.3rem;margin-top:.5rem}
.container{max-width:1100px;margin:0 auto;padding:0 2rem}
.btt{position:fixed;bottom:max(3.5rem,calc(var(--safe-b) + 2rem));right:max(1.5rem,var(--safe-r));width:40px;height:40px;border-radius:50%;background:var(--btn-fill);color:var(--btn-fill-text);display:grid;place-items:center;cursor:pointer;font-size:.75rem;opacity:0;pointer-events:none;transition:all .3s;z-index:99;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.btt.show{opacity:1;pointer-events:auto}
.btt:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
@media(max-width:768px){
nav{padding:.65rem 1.25rem}
.nav-links{display:none}
.burger{display:grid;place-items:center}
.article-container{padding-top:5.5rem}
}
@media print{
nav,.btt,.mobile-menu{display:none}
.article-container{padding-top:2rem}
}
@media(max-width:480px){.foot-grid{gap:1rem}}