:root { color-scheme: dark; --blog-ground: #2a0709; --blog-panel: #3d0f11; --blog-cream: #f4ede6; --blog-muted: rgba(244,237,230,.68); --blog-amber: #f2a02e; --blog-rule: rgba(244,237,230,.3); }
body.blog-theme { margin: 0; background: var(--blog-ground); color: var(--blog-cream); font-family: 'Inter Tight', sans-serif; }
body.blog-theme.blog-menu-open { overflow:hidden; }
.blog-theme main { font: inherit; line-height:normal; letter-spacing:normal; }
.blog-theme *, .blog-theme *::before, .blog-theme *::after { box-sizing: border-box; }
.blog-theme a { color: inherit; }
.blog-theme a:focus-visible, .blog-theme button:focus-visible { outline: 2px solid var(--blog-amber); outline-offset: 4px; }
.blog-theme .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: .75rem; background: var(--blog-cream); color: var(--blog-ground); }
.blog-theme .skip-link:focus { top: 1rem; }
.blog-nav { position:sticky; top:0; z-index:10; height:76px; padding:0 clamp(16px,3.6vw,72px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:var(--blog-ground); }
.blog-logo { justify-self:start; text-decoration:none; font-size:24px; font-weight:600; letter-spacing:-.035em; line-height:1; white-space:nowrap; }
.blog-menu { display:flex; align-items:center; gap:clamp(20px,2.8vw,54px); margin:0; padding:0; list-style:none; }
.blog-menu a { position:relative; padding:6px 0; text-decoration:none; text-transform:uppercase; font-size:clamp(14px,1.15vw,19px); font-weight:500; white-space:nowrap; }
.blog-menu a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.blog-menu a:hover::after,.blog-menu a:focus-visible::after,.blog-menu a[aria-current=page]::after { transform:scaleX(1); }
.blog-right { justify-self:end; display:flex; align-items:center; gap:clamp(20px,3.2vw,64px); }
.blog-gh { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border:1.5px solid var(--blog-amber); color:var(--blog-amber)!important; background:rgba(28,6,8,.55); font-size:clamp(13px,1.05vw,17px); font-weight:500; letter-spacing:.01em; text-decoration:none; text-transform:uppercase; transition:background .2s ease,color .2s ease; }
.blog-gh:hover,.blog-gh:focus-visible { background:var(--blog-amber); color:var(--blog-ground)!important; }
.blog-linkedin { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; }
.blog-linkedin:hover { color:var(--blog-amber); }
.blog-burger { display:none; width:34px; height:22px; padding:0; border:0; background:none; cursor:pointer; gap:6px; align-content:center; }
.blog-burger span { display:block; height:2px; background:var(--blog-cream); transition:transform .25s ease,opacity .2s ease; }
.blog-burger[aria-expanded=true] span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.blog-burger[aria-expanded=true] span:nth-child(2) { opacity:0; }
.blog-burger[aria-expanded=true] span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
.blog-drawer { position:fixed; z-index:9; inset:0; padding:calc(76px + env(safe-area-inset-top,0px) + 24px) 24px 24px; overflow-y:auto; background:rgba(28,6,8,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.blog-drawer[hidden] { display:none; }
.blog-drawer ul { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.blog-drawer a { display:block; padding:10px 0; border-bottom:1px solid rgba(244,237,230,.15); color:var(--blog-cream); font-size:clamp(28px,7vw,44px); font-weight:600; letter-spacing:-.01em; text-decoration:none; text-transform:uppercase; }
.blog-drawer a[aria-current=page] { color:var(--blog-amber); }
.blog-drawer a > .social-icon { display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-3px; }
.blog-drawer .github-stars { margin-left:12px; font-size:16px; vertical-align:middle; }
.blog-social { display:flex; gap:12px; align-items:center; }
.blog-social a { display:inline-flex; align-items:center; padding:7px; color:var(--blog-cream); text-decoration:none; }
.social-icon { width:19px; height:19px; display:block; background:currentColor; mask:var(--icon) center/contain no-repeat; }
.blog-nav .social-icon { width:18px; height:18px; }
.icon-github { --icon:url('/assets/icons/brand-github.svg'); }
.icon-linkedin { --icon:url('/assets/icons/brand-linkedin.svg'); }
.icon-star { --icon:url('/assets/icons/star.svg'); }
.github-stars { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font:500 12px 'IBM Plex Mono',monospace; }
.github-stars[hidden] { display:none!important; }
.github-stars .social-icon { width:14px; height:14px; }
.blog-gh .github-stars { padding-left:10px; border-left:1px solid currentColor; }
.blog-social .github-stars { margin-left:8px; padding-left:9px; border-left:1px solid var(--blog-rule); }
.blog-main { min-height:70vh; }
.blog-wrap { width:min(100% - 40px, 1120px); margin:0 auto; padding:clamp(64px,9vw,128px) 0; }
.blog-title { margin:0; max-width:18ch; font-size:clamp(42px,7vw,88px); line-height:.96; letter-spacing:-.045em; font-weight:600; }
.blog-intro { margin:18px 0 0; color:var(--blog-muted); font-size:clamp(18px,2vw,24px); }
.blog-categories { display:flex; flex-wrap:wrap; gap:8px; margin:40px 0 52px; }
.blog-categories a { border:1px solid var(--blog-rule); padding:9px 13px; text-decoration:none; font-size:13px; }
.blog-categories a:hover, .blog-categories a[aria-current=page] { border-color:var(--blog-amber); color:var(--blog-amber); }
.blog-posts { border-top:1px solid var(--blog-rule); }
.blog-post { display:grid; grid-template-columns:minmax(130px,2fr) minmax(0,8fr); gap:24px; padding:27px 0 32px; border-bottom:1px solid var(--blog-rule); }
.blog-post time, .blog-post-cats { font:12px 'IBM Plex Mono',monospace; color:var(--blog-muted); }
.blog-post-cats { display:block; margin-top:10px; line-height:1.8; }
.blog-post h2 { margin:0; font-size:clamp(23px,3vw,36px); line-height:1.1; letter-spacing:-.025em; }
.blog-post a { text-decoration:none; }
.blog-post a:hover h2 { color:var(--blog-amber); }
.blog-post p { margin:12px 0 0; max-width:70ch; color:var(--blog-muted); font-size:16px; line-height:1.5; }
.blog-pagination { display:flex; justify-content:center; gap:8px; margin-top:40px; }
.blog-pagination a, .blog-pagination span { min-width:40px; padding:10px; text-align:center; border:1px solid var(--blog-rule); text-decoration:none; }
.blog-pagination [aria-current=page] { border-color:var(--blog-amber); color:var(--blog-amber); }
.blog-article { width:min(100% - 40px, 800px); margin:0 auto; padding:clamp(56px,8vw,112px) 0; }
.blog-back { display:inline-block; margin-bottom:48px; color:var(--blog-amber)!important; font:13px 'IBM Plex Mono',monospace; text-decoration:none; }
.blog-article h1 { margin:0 0 24px; font-size:clamp(42px,7vw,76px); line-height:.98; letter-spacing:-.04em; }
.blog-meta { color:var(--blog-muted); font:13px 'IBM Plex Mono',monospace; }
.blog-prose { margin-top:48px; font-size:18px; line-height:1.72; color:var(--blog-cream); overflow-wrap:anywhere; }
.blog-prose h2,.blog-prose h3 { margin:1.8em 0 .6em; line-height:1.1; letter-spacing:-.025em; }
.blog-prose h2 { font-size:clamp(30px,4vw,44px); }
.blog-prose h3 { font-size:28px; }
.blog-prose a { color:var(--blog-amber); text-underline-offset:3px; }
.blog-prose img,.blog-prose video { max-width:100%; height:auto; }
.blog-prose pre { overflow:auto; padding:20px 22px; background:#180607; border:1px solid var(--blog-rule); color:var(--blog-cream); font:14px/1.65 'IBM Plex Mono',ui-monospace,monospace; tab-size:4; }
.blog-prose pre:focus-visible { outline:2px solid var(--blog-amber); outline-offset:3px; }
.blog-prose pre code { font:inherit; color:inherit; }
.blog-prose :not(pre)>code { padding:.1em .3em; background:rgba(244,237,230,.12); font: .88em 'IBM Plex Mono',ui-monospace,monospace; }
.blog-prose pre .token.comment,.blog-prose pre .token.prolog,.blog-prose pre .token.doctype { color:#bcaeae; }
.blog-prose pre .token.keyword,.blog-prose pre .token.operator,.blog-prose pre .token.atrule,.blog-prose pre .token.selector { color:#f3bd79; }
.blog-prose pre .token.string,.blog-prose pre .token.attr-value,.blog-prose pre .token.inserted { color:#b6d4aa; }
.blog-prose pre .token.number,.blog-prose pre .token.boolean,.blog-prose pre .token.constant { color:#f3d496; }
.blog-prose pre .token.function,.blog-prose pre .token.class-name,.blog-prose pre .token.builtin { color:#e2b4d9; }
.blog-prose pre .token.variable,.blog-prose pre .token.property,.blog-prose pre .token.parameter,.blog-prose pre .token.attr-name { color:#c5d9e3; }
.blog-prose pre .token.punctuation { color:#d3c7c0; }
.blog-prose blockquote { margin:1.5em 0; padding-left:20px; border-left:2px solid var(--blog-amber); color:var(--blog-muted); }
.blog-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.blog-tags span { padding:7px 10px; border:1px solid var(--blog-rule); font-size:13px; }
.blog-footer { padding:32px clamp(18px,4vw,64px); border-top:1px solid var(--blog-rule); display:flex; justify-content:space-between; gap:20px; color:var(--blog-muted); font-size:14px; }
.blog-footer a { text-decoration:none; }
.blog-footer nav { display:flex; flex-wrap:wrap; gap:16px; }
@media(min-width:961px) and (max-width:1200px) {
 .blog-nav { grid-template-columns:auto 1fr auto; gap:18px; }
 .blog-nav nav { justify-self:center; }
 .blog-menu { gap:16px; }
 .blog-right { gap:16px; }
 .blog-gh { gap:6px; padding:9px 10px; }
}
@media(max-width:960px) {
 .blog-nav { height:72px; grid-template-columns:1fr auto; }
 .blog-nav > nav { display:none; }
 .blog-burger { display:grid; }
 .blog-gh { padding:9px 10px; }
 .blog-gh .label,.blog-gh .github-stars { display:none!important; }
 .blog-drawer { padding-top:calc(72px + env(safe-area-inset-top,0px) + 24px); }
 .blog-social .github-stars { display:none!important; }
}
@media(max-width:760px) {
 .blog-categories a { padding:12px 10px; font-size:14px; line-height:18px; }
 .blog-post { grid-template-columns:1fr; gap:12px; }
 .blog-post-cats { display:inline; margin-left:10px; }
 .blog-prose pre { padding:16px 14px; }
 .blog-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px 8px; padding:28px 20px; }
 .blog-footer > span { grid-column:1/-1; }
 .blog-footer nav { gap:12px; white-space:nowrap; }
 .blog-footer .blog-social { gap:4px; justify-self:end; }
 .blog-footer .blog-social a { padding:4px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }