.progress-bar{position:fixed;top:60px;left:0;height:1.5px;background:var(--accent);width:0%;z-index:99}.article-wrap{padding-top:60px;max-width:var(--max-w);margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}.fade-in-up{animation:fadeInUp .4s .1s ease-out forwards;opacity:0;transform:translateY(10px)}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.article-header{max-width:var(--col);margin:0 auto;padding:6rem 2rem 3rem;text-align:center}.article-meta-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.article-cat{font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:2px;font-family:var(--font-mono)}.badge-study{background:var(--accent-2-soft);color:var(--accent-2)}.badge-project{background:#e6f0e6;color:#2e7d32}.badge-trouble{background:#fff3e0;color:#e65100}.badge-tech{background:var(--accent-soft);color:var(--accent)}[data-theme=dark] .badge-project{background:#1a2e1a;color:#66bb6a}[data-theme=dark] .badge-trouble{background:#2e1f0a;color:#ffa726}.article-date,.article-read-time{font-size:.75rem;color:var(--ink-3);font-family:var(--font-mono)}.article-title{font-family:var(--font-serif);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:300;line-height:1.08;letter-spacing:-.04em;color:var(--ink);margin-bottom:1.5rem}.article-subtitle{font-size:1.1rem;line-height:1.7;color:var(--ink-2);font-weight:300;margin-bottom:2rem;max-width:35ch;margin-left:auto;margin-right:auto}.article-structure-divider{max-width:var(--max-w);margin:0 auto 4rem;padding:0 2rem;display:flex;align-items:center}.struct-line{flex:1;height:1px;background:var(--border);position:relative}.struct-line:before{content:"";position:absolute;left:0;top:-3px;width:6px;height:6px;background:var(--accent);border-radius:50%}.struct-line:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;background:var(--accent);border-radius:50%}.article-body{max-width:var(--col);margin:0 auto;padding:0 2rem 8rem}.article-body h2{font-family:var(--font-serif);font-size:1.8rem;font-weight:400;color:var(--ink);margin:3.5rem 0 1.25rem;line-height:1.2;letter-spacing:-.01em}.article-body h3{font-family:var(--font-sans);font-size:1.15rem;font-weight:600;color:var(--ink);margin:2.5rem 0 1rem}.article-body p{font-size:1.05rem;line-height:1.9;color:var(--ink-2);font-weight:400;margin-bottom:1.6rem;letter-spacing:-.005em}.article-body strong{color:var(--ink);font-weight:600}.article-body em{font-style:italic}.article-body a{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:border-color var(--transition)}.article-body a:hover{border-color:var(--accent)}.article-body ul,.article-body ol{padding-left:1.5rem;margin-bottom:1.6rem}.article-body li{font-size:1.05rem;line-height:1.9;color:var(--ink-2);font-weight:400;margin-bottom:.5rem}.article-body blockquote{margin:3rem 0;padding:1.5rem 2.5rem;border-left:1px solid var(--accent-2);background:var(--bg-card);position:relative;border-radius:var(--radius)}.article-body blockquote p{font-family:var(--font-serif);font-size:1.2rem;font-style:italic;font-weight:300;color:var(--ink);margin:0;line-height:1.7}.article-body code{font-family:var(--font-mono);font-size:.85em;background:var(--accent-soft);color:var(--accent);padding:3px 6px;border-radius:2px}.article-body pre{margin:2.5rem 0;border-radius:var(--radius);background:#1a1917;padding:1.5rem;overflow-x:auto;border:1px solid var(--border-strong)}[data-theme=dark] .article-body pre{background:#0d0b08}.article-body pre code{color:#e8e4dc;background:none;border:none;padding:0;font-size:.875rem}.article-body img{width:100%;max-width:100%;display:block;border-radius:var(--radius);border:1px solid var(--border);margin:2.5rem auto}.article-body p:has(img){margin:0}.auto-image-wrap{margin:0}.article-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:4rem 0 0;padding-top:2rem;border-top:1px solid var(--border)}.article-tag{font-size:.7rem;padding:4px 12px;border-radius:100px;border:1px solid var(--border-strong);color:var(--ink-3);font-family:var(--font-mono);font-weight:400}.article-tag:hover{border-color:var(--accent-2);color:var(--accent-2)}@media(max-width:768px){.article-wrap{border:none;padding-top:20px}.article-title{font-size:2rem}.article-header{padding:4rem 1rem 2rem}.article-body{padding:0 1rem 5rem}.article-meta-row{flex-wrap:wrap;gap:.5rem 1rem}}