.blog-header{color-scheme:dark;--bg:#000;--surface:#101012;--ink:#f0f0f0;--muted:#a0a0a7;--line:#28282c;--header:#000e;--accent:#ec8c20;--mint:#14291e;--blue:#13252b;--peach:#2e2117;--button:#f0f0f0;--button-ink:#121212}
html[data-theme=light] .blog-header{color-scheme:light;--bg:#f5f5f5;--surface:#fff;--ink:#202020;--muted:#64646b;--line:#dedede;--header:#f5f5f5ed;--mint:#eeeeee;--blue:#eeeeee;--peach:#eeeeee;--accent:#404040;--button:#202020;--button-ink:#fff}
.blog-header{width:100%;font:17px/1.6 "Instrument Sans",Arial,sans-serif;flex:none;color:var(--ink)}.blog-header *{box-sizing:border-box}.blog-header button{font:inherit}.blog-header img{max-width:100%}.blog-header svg{display:block}.blog-header a{color:inherit;text-underline-offset:4px}.blog-header :focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.blog-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:var(--header);backdrop-filter:blur(12px)}.blog-header .header-inner{max-width:1200px;min-height:104px;margin:auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px}.blog-header .brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none}.blog-header .brand-icon{width:64px;height:64px;object-fit:contain}.blog-header .brand-wordmark{width:132px;height:44px;object-fit:contain}html[data-theme=light] .blog-header .brand-wordmark{filter:brightness(.12)}.blog-header .site-nav{display:flex;align-items:center;gap:28px}.blog-header .site-nav a{font-size:16px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}.blog-header .site-nav a:hover,.blog-header .site-nav a[aria-current]{color:var(--ink)}.blog-header .header-actions{display:flex;align-items:center;gap:16px}.blog-header .language{font-size:12px;font-weight:600;text-decoration:none;color:var(--muted);padding:6px 2px}.blog-header .language:hover{color:var(--ink)}.blog-header .theme-toggle{border:0;padding:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--muted);cursor:pointer}.blog-header .theme-toggle:hover{background:var(--line);color:var(--ink)}.blog-header .theme-toggle svg{width:18px;height:18px}.blog-header .theme-toggle .moon{display:none}html[data-theme=light] .blog-header .theme-toggle .sun{display:none}html[data-theme=light] .blog-header .theme-toggle .moon{display:block}.blog-header .store-link{display:inline-flex;flex:none;line-height:0;border-radius:9px;transition:opacity .18s}.blog-header .store-link img{width:160px;height:54px}.blog-header .store-link:hover{opacity:.8}.blog-header .nav-toggle{display:none}@media(max-width:980px){.blog-header .header-inner{gap:16px;min-height:88px;padding:12px 24px}.blog-header .brand-icon{width:52px;height:52px}.blog-header .brand-wordmark{width:112px;height:38px}.blog-header .nav-toggle{display:grid;place-items:center;background:transparent;border:1px solid var(--line);border-radius:9px;width:38px;height:38px;color:var(--ink);padding:8px;cursor:pointer}.blog-header .nav-toggle svg{width:20px;height:20px}.blog-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:20px 24px;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 12px 20px #0001;gap:0}.blog-header .site-nav[data-open=true]{display:flex;flex-direction:column;align-items:stretch}.blog-header .site-nav a{padding:12px 0}.blog-header .header-actions{gap:12px}.blog-header .header-actions .store-link{display:none}}@media(max-width:640px){.blog-header .header-inner{padding:10px 20px;min-height:80px;gap:10px}.blog-header .brand{gap:6px}.blog-header .brand-icon{width:44px;height:44px}.blog-header .brand-wordmark{width:102px;height:34px}.blog-header .header-actions{gap:8px}.blog-header .language{padding:6px 0}}
/* Keep article/legal body link colors from leaking into the shared navigation. */
html[data-theme=light] .blog-header .site-nav a,html[data-theme=light] .blog-header .language{color:var(--muted)}
html[data-theme=light] .blog-header .site-nav a:hover,html[data-theme=light] .blog-header .site-nav a[aria-current],html[data-theme=light] .blog-header .language:hover{color:var(--ink)}