.header-nav { display:flex; align-items:center; gap:26px; font-size:12px; }
.tooling-inventory { margin-top:28px; border-top:1px solid var(--line); }
.tooling-inventory > summary { padding:20px 0; cursor:pointer; color:var(--accent); font-size:15px; }
.tooling-inventory > summary span { display:inline-block; margin-left:12px; color:var(--muted); font-size:12px; }
[data-browser-dependencies] > h3 { font-size:16px; font-weight:500; margin:28px 0 16px; }
.header-nav > a[aria-current] { color:var(--accent); }
.blog-main { display:block; padding-bottom:70px; }
.blog-intro { padding:78px 0 52px; max-width:830px; }
.blog-intro h1 { font-size:clamp(44px,6vw,78px); white-space:normal; letter-spacing:-.06em; margin-bottom:24px; }
.blog-deck { max-width:560px; color:var(--muted); font-size:19px; line-height:1.6; }
.author-inline { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.author-inline img { border-radius:8px; object-fit:cover; }
.author-inline a { color:var(--text); }
.archive { border-top:1px solid var(--line); }
.archive-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; padding:28px 0; }
.search-form { display:flex; flex:1 1 280px; max-width:460px; border:1px solid #3d5748; border-radius:5px; overflow:hidden; }
.search-form[hidden] { display:none; }
.search-form input { width:100%; min-width:0; padding:15px; background:transparent; color:var(--text); border:0; font:inherit; font-size:14px; }
.search-form input::placeholder { color:#94a69c; }
.search-form button { display:flex; align-items:center; gap:10px; border:0; background:#193327; color:var(--accent); padding:0 16px; cursor:pointer; }
.archive-tags,.tag-list { display:flex; gap:8px; flex-wrap:wrap; }
.tag { display:inline-block; border:1px solid var(--line); border-radius:4px; padding:7px 10px; color:#a8c4b3; font-size:11px; line-height:1.2; }
.tag:hover,.tag.selected { background:#1b3528; border-color:#527760; color:var(--accent); }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 44px; }
.post-card { padding:34px 0; border-top:1px solid var(--line); min-width:0; }
.card-top { display:flex; justify-content:space-between; gap:16px; color:var(--muted); font-size:11px; margin-bottom:26px; }
.card-number { font-family:monospace; color:var(--accent); }
.post-card h2 { margin:0 0 16px; font-weight:400; font-size:clamp(24px,2.5vw,32px); letter-spacing:-.035em; line-height:1.2; }
.post-card h2 a { display:flex; justify-content:space-between; gap:20px; }
.post-card h2 svg { flex-shrink:0; margin-top:5px; color:var(--accent); transition:transform .2s; }
.post-card:hover h2 svg { transform:translate(3px,-3px); }
.post-card p { font-size:14px; line-height:1.75; color:var(--muted); max-width:52ch; margin-bottom:24px; }
.demo-label { display:block; font:9px monospace; letter-spacing:1.5px; color:var(--accent); margin-bottom:14px; }
.pagination { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:28px 0; }
.pagination a,.pagination button { padding:12px 16px; border:1px solid var(--line); border-radius:4px; font-size:12px; color:var(--text); background:transparent; cursor:pointer; }
.pagination [aria-current] { color:var(--background); background:var(--accent); }
.search-status { color:var(--muted); font-size:13px; }
.search-status:empty { margin:0; }
.skeleton-bar,.media-skeleton { background:#182720; background-image:linear-gradient(100deg,transparent 25%,#b2c7bb0c 45%,transparent 65%); background-size:220% 100%; animation:skeleton-shimmer 1.8s ease-in-out infinite; border-radius:5px; }
.skeleton-bar { display:block; height:13px; margin:0 0 15px; }
.skeleton-short { width:35%; }.skeleton-heading { height:30px; width:82%; margin:25px 0 23px; }.skeleton-line { width:100%; }
.skeleton-card .skeleton-short:last-child { margin-top:24px; }
.media-skeleton { display:inline-grid; vertical-align:middle; max-width:100%; }
.media-skeleton img { opacity:0; max-width:100%; height:auto; }
.cover-skeleton { display:block; width:100%; margin-bottom:45px; }
.cover-skeleton .post-cover { display:block; margin-bottom:0; }
@keyframes skeleton-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }
@media(prefers-reduced-motion:reduce){.skeleton-bar,.media-skeleton{animation:none;}}
.text-button,.back-link { color:var(--accent); background:none; border:0; font:inherit; font-size:13px; padding:16px 0; cursor:pointer; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; padding:30px 0; color:var(--muted); font-size:11px; line-height:1.5; }
.breadcrumbs > span:last-child { max-width:none; min-width:0; flex:1; overflow-wrap:anywhere; }
.breadcrumbs > span:not(:last-child) { flex-shrink:0; }
.post-header { max-width:880px; padding:30px 0 24px; }
.post-header h1 { white-space:normal; font-size:clamp(38px,5.2vw,70px); letter-spacing:-.05em; line-height:1.08; margin:24px 0; text-wrap:balance; }
.post-summary { font-size:19px; line-height:1.6; color:var(--muted); max-width:65ch; }
.post-byline { display:flex; align-items:center; gap:25px; flex-wrap:wrap; font-size:11px; color:var(--muted); margin-top:30px; }
.demo-notice { background:#14291f; border-left:2px solid var(--accent); padding:14px 18px; font-size:12px; line-height:1.6; color:#b7c9be; margin-top:24px; }
.post-cover { width:100%; height:auto; max-height:520px; object-fit:cover; border-radius:8px; margin-bottom:45px; }
.reading-layout { border-top:1px solid var(--line); padding-top:45px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:55px; }
.reading-layout.no-toc { display:block; }
.toc { font-size:12px; line-height:1.6; }
.toc details { position:sticky; top:28px; }
.toc summary { color:var(--accent); font-size:10px; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; padding:8px 0; }
.toc ol { list-style:none; padding:0; }
.toc li { padding:7px 0; color:var(--muted); }
.toc .toc-level-3 { padding-left:12px; }
.toc a:hover { color:var(--accent); }
.article-body { max-width:70ch; min-width:0; font-size:17px; line-height:1.8; color:#c5d1c9; overflow-wrap:anywhere; }
.article-body > :first-child { margin-top:0; }
.article-body h2,.article-body h3,.article-body h4 { color:var(--text); line-height:1.25; scroll-margin-top:30px; font-weight:500; margin:2em 0 .75em; letter-spacing:-.03em; }
.article-body h2 { font-size:30px; }.article-body h3 {font-size:23px;}
.article-body a { text-decoration:underline; text-underline-offset:4px; color:var(--accent); }
.article-body strong { color:var(--text); }
.article-body p,.article-body ul,.article-body ol { margin:0 0 1.4em; }
.article-body li { margin:.3em 0; }
.article-body blockquote { margin:30px 0; border-left:2px solid #4f765e; padding:6px 24px; color:#b5ccbf; }
.article-body blockquote > :last-child {margin-bottom:0;}
.article-body .callout { background:#13271d; padding:22px 25px; border-radius:0 6px 6px 0; font-size:15px; }
.article-body .callout-warning { border-color:#d2b57d; }
.article-body code { font-size:.82em; background:#16281e; color:#b5e4c8; padding:3px 5px; border-radius:3px; }
.article-body pre { overflow-x:auto; max-width:100%; padding:28px 22px; background:#050e0a; border:1px solid var(--line); border-radius:6px; line-height:1.7; }
.article-body pre code { padding:0; background:none; white-space:pre; overflow-wrap:normal; }
.code-wrapper { position:relative; }.copy-code { display:block; margin-left:auto; border:1px solid var(--line); background:#152a20; color:var(--accent); padding:8px 12px; cursor:pointer; font-size:11px; border-radius:4px; }
.hljs-keyword,.hljs-literal {color:#ceb3f3;}.hljs-string,.hljs-attr {color:#a4d5aa;}.hljs-number {color:#e5bc8d;}.hljs-comment {color:#7f9e8b;}.hljs-title {color:#92ced1;}
.table-scroll { overflow-x:auto; margin:28px 0; }.article-body table { border-collapse:collapse; width:100%; font-size:14px; }.article-body th,.article-body td { text-align:left; border-bottom:1px solid var(--line); padding:14px; }.article-body th {color:var(--accent); background:#11231a;}
.article-body img { display:block; max-width:100%; height:auto; border-radius:6px; }.image-caption { display:block; color:var(--muted); font-size:12px; margin:12px 0 28px; }.article-figure {display:block;}
.motion-figure{margin:32px 0;padding:0}.motion-figure button{margin-top:12px;padding:9px 14px;border:1px solid var(--line);border-radius:5px;background:#11231a;color:var(--accent);font:inherit;font-size:12px;cursor:pointer}.motion-figure button[hidden]{display:none}.motion-figure button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.motion-figure figcaption{color:var(--muted);font-size:12px;margin-top:12px;line-height:1.6}
.article-body hr {border:0; border-top:1px solid var(--line); margin:38px 0;}.footnotes {font-size:13px;}.task-list-item {list-style:none;}.task-list-item-checkbox {accent-color:var(--accent); margin-right:10px;}
.article-end {display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:35px 0; margin:45px 0; border-block:1px solid var(--line); font-size:12px; color:var(--muted);}.article-end a {display:inline-flex; gap:12px; color:var(--accent);}.related h2 {font-weight:400; font-size:26px;}
.privacy-copy {max-width:70ch; padding:60px 0; line-height:1.8; color:var(--muted);}.privacy-copy h1 {white-space:normal; font-size:44px; color:var(--text);}.privacy-copy h2 {color:var(--text);font-size:24px;}.privacy-copy a {color:var(--accent);text-decoration:underline;}
.contact-panel { margin:28px 0; padding:26px; border:1px solid var(--line); border-radius:6px; background:#0d1c1580; }
.blog-main:has(> .contact-page) { padding-bottom:0; }
.contact-page > .contact-panel:last-child { margin-bottom:0; }
@media(max-width:760px){.contact-page { padding-bottom:40px; }}
.contact-panel h2 { margin-top:0; }.contact-panel p:last-child { margin-bottom:0; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; }.contact-page .button { text-decoration:none; cursor:pointer; }.contact-page .button-primary { color:var(--background); }
.contact-page .button-secondary { background:transparent; color:var(--accent); }
.email-reveal { display:flex; flex-direction:column; align-items:flex-start; gap:12px; width:100%; padding:16px; border:1px dashed var(--line); border-radius:4px; background:#08110f; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.email-reveal[hidden] { display:none; }
.email-stage { display:grid; }
.email-stage > * { grid-area:1 / 1; min-width:0; }
/* Reserve the actual controls' responsive height, even before revealing. */
.email-stage [data-email-options][hidden] { display:block !important; visibility:hidden; pointer-events:none; }
.email-stage .contact-address { min-height:1.6em; line-height:1.6; margin:0 0 20px; }
.email-stage.is-revealed .email-reveal[hidden] { display:flex !important; visibility:hidden; pointer-events:none; animation:email-placeholder-out .25s ease-out; }
.email-stage.is-revealed .contact-address { animation:email-address-in .25s ease-out both; }
.email-stage.is-revealed .contact-actions { animation:email-actions-in .25s .12s ease-out both; }
@keyframes email-placeholder-out { from { visibility:visible; opacity:1; } to { visibility:hidden; opacity:0; } }
@keyframes email-address-in { from { opacity:0; filter:blur(5px); } to { opacity:1; filter:blur(0); } }
@keyframes email-actions-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.email-preview { font-size:22px; line-height:1.5; filter:blur(5px); opacity:.75; user-select:none; pointer-events:none; }
.email-reveal-hint { color:var(--accent); font-size:13px; }
.email-reveal:hover { border-color:var(--accent); }.email-reveal:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.contact-address { color:var(--text); font-size:22px; overflow-wrap:anywhere; }.contact-status,.contact-note { font-size:13px; }
.contact-status:empty { display:none; }.secure-details summary { color:var(--text); cursor:pointer; font-size:20px; }.secure-details[open] summary { margin-bottom:24px; }
.key-fingerprint { font-family:monospace; color:var(--accent); overflow-wrap:anywhere; padding:16px; background:#08110f; border:1px solid var(--line); border-radius:3px; }
@media(max-width:600px){.contact-page h1 { font-size:36px; }.contact-panel { padding:20px; }}
@media(max-width:900px){.reading-layout{grid-template-columns:170px minmax(0,1fr);gap:30px;}.post-byline{gap:16px;}}
@media(max-width:760px){.header-nav{gap:16px;font-size:11px;}.site-header .wordmark{display:none;}.blog-intro{padding:45px 0 32px;}.blog-deck{font-size:16px;}.post-grid{grid-template-columns:1fr;}.post-card{padding:28px 0;}.reading-layout{display:block;padding-top:25px;}.toc{margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:18px;}.toc details{position:static;}.article-body{font-size:16px;}.post-header{padding-top:10px;}.post-summary{font-size:17px;}.post-byline{align-items:flex-start;flex-direction:column;}.breadcrumbs{font-size:10px;}.blog-main{padding-bottom:40px;}.archive-tools{gap:18px;}.search-form{max-width:none;}.post-header h1{font-size:clamp(36px,9vw,58px);}.article-end{margin:30px 0;}}
.attributions { padding: 60px 0; max-width: 100%; }
.attributions-intro { max-width: 760px; margin-bottom: 48px; }
.attributions h1 { font-size: clamp(38px, 6vw, 64px); }
.attribution-section { padding: 32px 0; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.8; }
.attribution-section h2, .attribution-section h3 { color: var(--text); font-weight: 500; }
.attribution-section h2 { font-size: 25px; margin: 0 0 24px; }
.attribution-section h3 { font-size: 17px; }
.attribution-section a:not(.button) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 48px; }
.inventory-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.inventory-scope { max-width: 85ch; }
.inventory-meta { font-size: 12px; overflow-wrap: anywhere; }
.dependency-list { margin-top: 30px; }
.dependency { border-top: 1px solid var(--line); }
.dependency summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 17px 0; cursor: pointer; }
.dependency summary::after { content: '+'; color: var(--accent); flex-shrink: 0; }
.dependency[open] summary::after { content: '−'; }
.dependency-name { color: var(--text); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dependency-version, .dependency-license { font-size: 12px; color: var(--muted); }
.dependency-version { display: inline-block; margin-left: 8px; }
.dependency-license { max-width: 35%; overflow-wrap: anywhere; }
.dependency-context { padding: 0 0 24px; }
.license-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.65; padding: 20px; border: 1px solid var(--line); background: #08110f; }
@media (max-width: 600px) { .stack-grid { grid-template-columns: 1fr; gap: 12px; } .attributions { padding-top: 40px; } .dependency-version { display: block; margin-left: 0; } }