.blog-shell{z-index:1;min-height:100vh;padding-top:80px;position:relative}.blog-content-grid{grid-template-columns:260px minmax(0,1fr) 240px;gap:0;width:100%;max-width:1440px;margin:0 auto;padding:0 20px;display:grid}.blog-nav-rail{border-right:1px solid var(--color-border);background:color-mix(in srgb, var(--color-bg) 40%, transparent);-webkit-backdrop-filter:blur(12px);display:block}.blog-nav-rail-sticky{max-height:calc(100vh - 100px);padding:var(--space-xl) var(--space-md) var(--space-lg) 0;scrollbar-width:none;position:sticky;top:80px;overflow-y:auto}.blog-nav-rail-sticky::-webkit-scrollbar{display:none}.blog-nav-back{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:12px;padding:8px 12px;font-size:11px;font-weight:600;text-decoration:none;transition:color .2s;display:block}.blog-nav-back:hover{color:var(--color-accent)}.blog-nav-list{margin:0;padding:0 12px;list-style:none}.blog-nav-link{font-family:var(--font-mono);color:var(--color-text-muted);transition:all .2s var(--ease);border:1px solid #0000;border-radius:6px;margin:2px 0;padding:6px 12px;font-size:12px;line-height:1.4;text-decoration:none;display:block}.blog-nav-link:hover{color:var(--color-text-bright);background:#ffffff08}.blog-nav-link[aria-current=page]{color:var(--color-accent);background:var(--color-highlight-dim);border-color:var(--color-highlight-muted)}.blog-toc-rail{border-left:1px solid var(--color-border);display:block}.blog-toc-rail-sticky{max-height:calc(100vh - 100px);padding:var(--space-xl) 0 var(--space-lg) var(--space-md);scrollbar-width:thin;scrollbar-color:var(--color-border-strong) transparent;position:sticky;top:80px;overflow-y:auto}.blog-toc-rail-sticky::-webkit-scrollbar{width:8px}.blog-toc-rail-sticky::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:999px}.blog-toc-rail-sticky::-webkit-scrollbar-track{background:0 0}.blog-toc-label{font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-bright);margin-bottom:16px;font-size:10px;font-weight:700}.blog-toc-list{margin:0;padding:0;list-style:none}.blog-toc-list a{font-family:var(--font-mono);color:var(--color-text-muted);padding:4px 0;font-size:11px;text-decoration:none;transition:color .2s;display:block}.blog-toc-list a:hover{color:var(--color-accent)}.blog-toc-list a[data-active]{color:var(--color-accent);font-weight:600}.blog-main{min-width:0;padding:var(--space-xl) var(--space-2xl) var(--space-3xl);width:100%;max-width:840px;margin:0 auto}.blog-main--index{max-width:1100px;padding:var(--space-2xl) 20px var(--space-3xl)}.blog-hero-image{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--color-border);width:100%;height:auto;margin-bottom:var(--space-xl);border-radius:12px;box-shadow:0 12px 40px #0000004d}.blog-article-header{margin-bottom:var(--space-2xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.blog-kicker{font-family:var(--font-mono);color:var(--color-accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px;font-size:11px}.blog-article-header h1{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-text-bright);font-size:clamp(32px,5vw,48px);font-weight:700;line-height:1.1}.blog-meta{font-family:var(--font-mono);color:var(--color-text-muted);align-items:center;gap:16px;margin-top:24px;font-size:12px;display:flex}.blog-index-header{margin-bottom:var(--space-2xl)}.blog-index-header h1{font-family:var(--font-display);letter-spacing:-.03em;color:var(--color-text-bright);font-size:clamp(40px,7vw,64px);font-weight:700;line-height:1}.blog-featured{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 30%, transparent);transition:all .3s var(--ease);border-radius:16px;grid-template-columns:1.4fr 1fr;margin-bottom:48px;text-decoration:none;display:grid;overflow:hidden}.blog-featured:hover{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-surface) 50%, transparent);box-shadow:0 16px 48px #0000004d}.blog-featured-image{object-fit:cover;width:100%;height:100%;min-height:280px;display:block}.blog-featured-body{flex-direction:column;padding:36px 32px;display:flex}.blog-featured-body h2{font-family:var(--font-display);color:var(--color-text-bright);margin-bottom:12px;font-size:24px;font-weight:700;line-height:1.2}.blog-featured-body p{color:var(--color-text-muted);font-size:15px;line-height:1.6}.blog-featured-meta{margin-top:auto;padding-top:24px}.blog-featured-meta time{font-family:var(--font-mono);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.blog-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.blog-grid-card{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 20%, transparent);transition:all .3s var(--ease);border-radius:12px;flex-direction:column;padding:28px 24px;text-decoration:none;display:flex}.blog-grid-card:hover{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-surface) 40%, transparent);transform:translateY(-3px);box-shadow:0 12px 32px #0000004d}.blog-grid-card-body{flex:1}.blog-grid-card h2{font-family:var(--font-display);color:var(--color-text-bright);margin-bottom:10px;font-size:18px;font-weight:600;line-height:1.3}.blog-grid-card p{color:var(--color-text-muted);font-size:14px;line-height:1.6}.blog-grid-card-footer{justify-content:flex-end;align-items:center;margin-top:16px;padding-top:20px;display:flex}.blog-grid-card-footer time{font-family:var(--font-mono);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.blog-card-tags,.blog-tags{flex-wrap:wrap;gap:6px;display:flex}.blog-tag{font-family:var(--font-mono);color:var(--color-text-muted);background:color-mix(in srgb, var(--color-surface) 50%, transparent);border:1px solid var(--color-border);border-radius:4px;padding:2px 8px;font-size:11px;line-height:1.4}.blog-tags{margin-top:16px}.blog-share{border-top:1px solid var(--color-border);align-items:center;gap:12px;margin-top:32px;padding-top:24px;display:flex}.blog-share-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-muted);margin-right:8px;font-size:10px}.blog-share-btn{background:color-mix(in srgb, var(--color-surface) 50%, transparent);backdrop-filter:blur(8px);border:1px solid var(--color-border-strong);width:36px;height:36px;color:var(--color-text-muted);transition:all .2s var(--ease);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;display:flex}.blog-share-btn svg{width:18px;height:18px}.blog-share-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-highlight-dim);transform:translateY(-2px);box-shadow:0 4px 12px #0003}.blog-share-btn.copied{color:var(--color-accent);border-color:var(--color-accent);background:var(--color-highlight-dim)}.blog-toc-inline{border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 30%, transparent);border-radius:12px;margin-bottom:48px;padding:24px;display:none}@media (width<=1280px){.blog-content-grid{grid-template-columns:260px 1fr}.blog-toc-rail{display:none}.blog-toc-inline{display:block}}@media (width<=1024px){.blog-content-grid{display:block}.blog-nav-rail{display:none}.blog-featured{grid-template-columns:1fr}.blog-featured-image{min-height:200px;max-height:300px}.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.blog-main{padding:var(--space-xl) 20px}.blog-main--index{padding:var(--space-xl) 16px}.blog-grid{grid-template-columns:1fr}}