code[class*=language-],pre[class*=language-]{background:hsl(230,1%,98%);color:hsl(230,8%,24%);font-family:Fira Code,Fira Mono,Menlo,Consolas,DejaVu Sans Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection{background:hsl(230,1%,90%);color:inherit}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-]{padding:.2em .3em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.prolog{color:hsl(230,4%,64%)}.token.doctype,.token.entity,.token.punctuation{color:hsl(230,8%,24%)}.token.atrule,.token.attr-name,.token.boolean,.token.class-name,.token.constant,.token.number{color:hsl(35,99%,36%)}.token.keyword{color:hsl(301,63%,40%)}.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:hsl(5,74%,59%)}.token.attr-value,.token.attr-value>.token.punctuation,.token.builtin,.token.char,.token.inserted,.token.regex,.token.selector,.token.string{color:hsl(119,34%,47%)}.token.function,.token.operator,.token.variable{color:hsl(221,87%,60%)}.token.url{color:hsl(198,99%,37%)}.token.attr-value>.token.punctuation.attr-equals,.token.special-attr>.token.attr-value>.token.value.css{color:hsl(230,8%,24%)}.language-css .token.selector{color:hsl(5,74%,59%)}.language-css .token.property{color:hsl(230,8%,24%)}.language-css .token.function,.language-css .token.url>.token.function{color:hsl(198,99%,37%)}.language-css .token.url>.token.string.url{color:hsl(119,34%,47%)}.language-css .token.atrule .token.rule,.language-css .token.important,.language-javascript .token.operator{color:hsl(301,63%,40%)}.language-javascript .token.template-string>.token.interpolation>.token.interpolation-punctuation.punctuation{color:hsl(344,84%,43%)}.language-json .token.operator{color:hsl(230,8%,24%)}.language-json .token.null.keyword{color:hsl(35,99%,36%)}.language-markdown .token.url,.language-markdown .token.url-reference.url>.token.string,.language-markdown .token.url>.token.operator{color:hsl(230,8%,24%)}.language-markdown .token.url>.token.content{color:hsl(221,87%,60%)}.language-markdown .token.url-reference.url,.language-markdown .token.url>.token.url{color:hsl(198,99%,37%)}.language-markdown .token.blockquote.punctuation,.language-markdown .token.hr.punctuation{color:hsl(230,4%,64%);font-style:italic}.language-markdown .token.code-snippet{color:hsl(119,34%,47%)}.language-markdown .token.bold .token.content{color:hsl(35,99%,36%)}.language-markdown .token.italic .token.content{color:hsl(301,63%,40%)}.language-markdown .token.list.punctuation,.language-markdown .token.strike .token.content,.language-markdown .token.strike .token.punctuation,.language-markdown .token.title.important>.token.punctuation{color:hsl(5,74%,59%)}.token.bold{font-weight:700}.token.comment,.token.italic{font-style:italic}.token.entity{cursor:help}.token.namespace{opacity:.8}.token.token.cr:before,.token.token.lf:before,.token.token.space:before,.token.token.tab:not(:empty):before{color:hsla(230,8%,24%,.2)}div.code-toolbar>.toolbar.toolbar>.toolbar-item{margin-right:.4em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span{background:hsl(230,1%,90%);color:hsl(230,6%,44%);padding:.1em .4em;border-radius:.3em}div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover{background:hsl(230,1%,78%);color:hsl(230,8%,24%)}.line-highlight.line-highlight{background:hsla(230,8%,24%,.05)}.line-highlight.line-highlight:before,.line-highlight.line-highlight[data-end]:after{background:hsl(230,1%,90%);color:hsl(230,8%,24%);padding:.1em .6em;border-radius:.3em;box-shadow:0 2px 0 0 rgba(0,0,0,.2)}pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows>span:hover:before{background-color:hsla(230,8%,24%,.05)}.command-line .command-line-prompt,.line-numbers.line-numbers .line-numbers-rows{border-right-color:hsla(230,8%,24%,.2)}.command-line .command-line-prompt>span:before,.line-numbers .line-numbers-rows>span:before{color:hsl(230,1%,62%)}.rainbow-braces .token.token.punctuation.brace-level-1,.rainbow-braces .token.token.punctuation.brace-level-5,.rainbow-braces .token.token.punctuation.brace-level-9{color:hsl(5,74%,59%)}.rainbow-braces .token.token.punctuation.brace-level-10,.rainbow-braces .token.token.punctuation.brace-level-2,.rainbow-braces .token.token.punctuation.brace-level-6{color:hsl(119,34%,47%)}.rainbow-braces .token.token.punctuation.brace-level-11,.rainbow-braces .token.token.punctuation.brace-level-3,.rainbow-braces .token.token.punctuation.brace-level-7{color:hsl(221,87%,60%)}.rainbow-braces .token.token.punctuation.brace-level-12,.rainbow-braces .token.token.punctuation.brace-level-4,.rainbow-braces .token.token.punctuation.brace-level-8{color:hsl(301,63%,40%)}pre.diff-highlight>code .token.token.deleted:not(.prefix),pre>code.diff-highlight .token.token.deleted:not(.prefix){background-color:hsla(353,100%,66%,.15)}pre.diff-highlight>code .token.token.deleted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.deleted:not(.prefix)::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.deleted:not(.prefix)::selection{background-color:hsla(353,95%,66%,.25)}pre.diff-highlight>code .token.token.inserted:not(.prefix),pre>code.diff-highlight .token.token.inserted:not(.prefix){background-color:hsla(137,100%,55%,.15)}pre.diff-highlight>code .token.token.inserted:not(.prefix) ::selection,pre.diff-highlight>code .token.token.inserted:not(.prefix)::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix) ::selection,pre>code.diff-highlight .token.token.inserted:not(.prefix)::selection{background-color:hsla(135,73%,55%,.25)}.prism-previewer-gradient.prism-previewer-gradient div,.prism-previewer.prism-previewer:before{border-color:hsl(0,0,95%)}.prism-previewer-color.prism-previewer-color:before,.prism-previewer-easing.prism-previewer-easing:before,.prism-previewer-gradient.prism-previewer-gradient div{border-radius:.3em}.prism-previewer.prism-previewer:after{border-top-color:hsl(0,0,95%)}.prism-previewer-flipped.prism-previewer-flipped.after{border-bottom-color:hsl(0,0,95%)}.prism-previewer-angle.prism-previewer-angle:before,.prism-previewer-easing.prism-previewer-easing,.prism-previewer-time.prism-previewer-time:before{background:hsl(0,0%,100%)}.prism-previewer-angle.prism-previewer-angle circle,.prism-previewer-time.prism-previewer-time circle{stroke:hsl(230,8%,24%);stroke-opacity:1}.prism-previewer-easing.prism-previewer-easing circle,.prism-previewer-easing.prism-previewer-easing line,.prism-previewer-easing.prism-previewer-easing path{stroke:hsl(230,8%,24%)}.prism-previewer-easing.prism-previewer-easing circle{fill:transparent}@font-face{font-family:InterVariable;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://iconoir.com/fonts/InterVariable.woff2) format("woff2")}:root{--cursor:image-set(url("https://iconoir.com/cursors/default.png") 1x,url("https://iconoir.com/cursors/default@2x.png") 2x) 6 2,auto;--cursor-pointer:image-set(url("https://iconoir.com/cursors/default.png") 1x,url("https://iconoir.com/cursors/default@2x.png") 2x) 6 2,pointer;--black:#000000;--ink:#0a0a0a;--text:#5e5e5e;--mono-ink:#4a4a4a;--muted:#9a9a9a;--line:#e7e7e7;--band:#f5f5f5;--side:#fbfbfb;--card:#ffffff;--white:#ffffff;--gray-btn:#efefef;--gray-btn-hover:#e4e4e4;--dark:#0d0d0d;--dark-text:#a9a9a9;--font:InterVariable,"Inter",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--gutter:16px;color-scheme:light}@media (min-width:800px){:root{--gutter:40px}}@media (min-width:1400px){:root{--gutter:64px}}*{box-sizing:border-box}html{scroll-behavior:smooth}[role=button],a[href],button,label[for],select,summary{cursor:var(--cursor-pointer)}body{margin:0;cursor:var(--cursor);background:var(--white);color:var(--ink);font:400 16px/1.4 var(--font);letter-spacing:-.01em;font-feature-settings:"cv08","cv10","cv12","cv13","dlig";font-optical-sizing:auto;-webkit-font-smoothing:antialiased;overflow-x:hidden}button,input{font:inherit;letter-spacing:inherit}a,button,input{color:inherit}::selection{background:var(--black);color:var(--white)}::placeholder{color:var(--muted);opacity:1}@keyframes bottomAnimation{0%{transform:translateX(-50%) translateY(200px);opacity:0}10%{transform:translateX(-50%) translateY(0);opacity:1}90%{opacity:1}to{opacity:0}}.bottom-notification{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);border-radius:999px;padding:14px 24px;text-align:center;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);animation:bottomAnimation 3s cubic-bezier(.16,1,.3,1);z-index:2000}.carbon-img img{border-radius:10px}
.EVKEm{font-family:inherit;font-size:100%;line-height:1.15;margin:0;padding:0;text-transform:none;-webkit-appearance:none;background:none;border:none;outline:none;}
.mdCif.mdCif.mdCif{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;corner-shape:superellipse(1.6);cursor:var(--cursor-pointer);font-size:16px;font-weight:500;letter-spacing:-0.012em;text-decoration:none;white-space:nowrap;transition:background 0.15s,transform 0.15s;background:var(--black);color:var(--white);height:40px;padding:0 18px;font-size:14px;}
.mdCif.mdCif.mdCif:hover{background:#2a2a2a;}
.mdCif.mdCif.mdCif svg{width:20px;height:20px;flex:none;}
.mdCif.mdCif.mdCif:active{transform:scale(0.98);}
.mdCif.mdCif.mdCif:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
.cyrCSM.cyrCSM.cyrCSM{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;corner-shape:superellipse(1.6);cursor:var(--cursor-pointer);font-size:16px;font-weight:500;letter-spacing:-0.012em;text-decoration:none;white-space:nowrap;transition:background 0.15s,transform 0.15s;background:var(--gray-btn);color:var(--black);height:40px;padding:0 18px;font-size:14px;width:40px;padding:0;}
.cyrCSM.cyrCSM.cyrCSM:hover{background:var(--gray-btn-hover);}
.cyrCSM.cyrCSM.cyrCSM svg{width:20px;height:20px;flex:none;}
.cyrCSM.cyrCSM.cyrCSM:active{transform:scale(0.98);}
.cyrCSM.cyrCSM.cyrCSM:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
.ksaIdf.ksaIdf.ksaIdf{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;corner-shape:superellipse(1.6);cursor:var(--cursor-pointer);font-size:16px;font-weight:500;letter-spacing:-0.012em;text-decoration:none;white-space:nowrap;transition:background 0.15s,transform 0.15s;background:var(--black);color:var(--white);}
.ksaIdf.ksaIdf.ksaIdf:hover{background:#2a2a2a;}
.ksaIdf.ksaIdf.ksaIdf svg{width:20px;height:20px;flex:none;}
.ksaIdf.ksaIdf.ksaIdf:active{transform:scale(0.98);}
.ksaIdf.ksaIdf.ksaIdf:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
.jmjRJT.jmjRJT.jmjRJT{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border-radius:999px;corner-shape:superellipse(1.6);cursor:var(--cursor-pointer);font-size:16px;font-weight:500;letter-spacing:-0.012em;text-decoration:none;white-space:nowrap;transition:background 0.15s,transform 0.15s;background:var(--gray-btn);color:var(--black);}
.jmjRJT.jmjRJT.jmjRJT:hover{background:var(--gray-btn-hover);}
.jmjRJT.jmjRJT.jmjRJT svg{width:20px;height:20px;flex:none;}
.jmjRJT.jmjRJT.jmjRJT:active{transform:scale(0.98);}
.jmjRJT.jmjRJT.jmjRJT:focus-visible{outline:2px solid var(--black);outline-offset:3px;}
@keyframes cxfpCS{from{opacity:0;transform:translateY(70%);}}
.cPhkSz{position:relative;display:inline-flex;margin-left:8px;padding:3px 7px;border-radius:6px;background:var(--gray-btn);color:var(--black);font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.3;letter-spacing:0.02em;white-space:nowrap;text-decoration:none;transition:color 0.15s,background 0.15s;}
.cPhkSz:hover{background:var(--black);color:var(--white);}
.hmYite{position:relative;display:inline-block;overflow:hidden;transition:width 0.4s cubic-bezier(0.16,1,0.3,1);}
.fVYTjs{display:inline-block;animation:cxfpCS 0.4s cubic-bezier(0.16,1,0.3,1) both;animation:none;}
.bRNPbJ{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;}
.jpkAVS{font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.3;text-transform:uppercase;letter-spacing:0.02em;color:var(--mono-ink);margin-bottom:16px;}
.gWkmYT{font-family:var(--mono);font-size:12px;letter-spacing:-0.01em;color:var(--mono-ink);}
@keyframes deYyNK{from{opacity:0;transform:translateY(6px);}}
.jjXVFW{position:absolute;top:100%;left:50%;z-index:10;padding-top:20px;opacity:0;pointer-events:none;transform:translate(-50%,-4px);transition:opacity 0.15s,transform 0.2s cubic-bezier(0.16,1,0.3,1);}
.gPJRpZ{display:grid;grid-template-columns:repeat(3,max-content);gap:40px;padding:24px 28px;border-radius:20px;background:#f2f2f2;box-shadow:0 30px 80px -30px rgba(0,0,0,0.18),0 0 0 100vmax rgba(170,170,170,0.5);}
.gPJRpZ .sc-f6c0e9c7-0{margin-bottom:12px;}
.gPJRpZ:has(a:hover) a:not(:hover){opacity:0.4;}
.gKXGlX{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;font-weight:500;color:var(--black);text-decoration:none;white-space:nowrap;transition:opacity 0.15s;}
.hXncF{position:relative;}
@media (min-width: 1100px){.hXncF:hover .sc-ff4e7a8f-0,.hXncF:focus-within .sc-ff4e7a8f-0{opacity:1;pointer-events:all;transform:translate(-50%,0);}.hXncF:hover [data-intro],.hXncF:focus-within [data-intro]{animation:deYyNK 0.4s cubic-bezier(0.16,1,0.3,1) backwards;animation-delay:var(--delay);}@media (prefers-reduced-motion:reduce){.hXncF:hover [data-intro],.hXncF:focus-within [data-intro]{animation:none;}}}
.ieDthb{display:block;padding:16px 0;font-size:22px;line-height:1.25;font-weight:400;letter-spacing:-0.02em;text-decoration:none;white-space:nowrap;color:var(--black);border-bottom:1px solid var(--line);transition:opacity 0.15s;}
@media (min-width: 1100px){.ieDthb{padding:0;font-size:14px;font-weight:500;letter-spacing:-0.01em;border-bottom:none;}}
.kkMhaH{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.kOsOTC{height:68px;padding:0 var(--gutter);display:flex;align-items:center;gap:12px;}
@media (min-width: 800px){.kOsOTC{gap:32px;}}
.evfZYC{display:inline-flex;align-items:center;}
@keyframes huFUWe{0%{transform:rotate(0deg);}20%{transform:rotate(-14deg);}40%{transform:rotate(10deg);}60%{transform:rotate(-8deg);}80%{transform:rotate(4deg);}100%{transform:rotate(0deg);}}
.FQYvv{display:inline-flex;align-items:center;text-decoration:none;}
@media (prefers-reduced-motion:no-preference){.FQYvv:hover svg{animation:huFUWe 0.7s cubic-bezier(0.36,0,0.2,1);}}
.ETmct{display:flex;color:var(--black);margin-right:4px;}
.ETmct svg{transform-origin:50% 85%;width:26px;height:26px;}
@media (min-width: 800px){.ETmct svg{width:30px;height:30px;}}
.dypJAC{height:17px;margin-top:-3px;}
@media (min-width: 800px){.dypJAC{height:20px;}}
.bOpBpT{position:absolute;top:68px;left:0;right:0;display:flex;flex-direction:column;padding:8px var(--gutter) 24px;background:var(--white);box-shadow:0 30px 40px -30px rgba(0,0,0,0.18);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.2s linear;transform:translateY(-8px);opacity:0;pointer-events:none;}
@media (min-width: 1100px){.bOpBpT{position:static;flex-direction:row;align-items:center;gap:28px;margin-left:auto;padding:0;background:none;box-shadow:none;transform:none;opacity:1;pointer-events:all;}.bOpBpT:has(.sc-9d355c93-0:hover) .sc-9d355c93-0:not(:hover){opacity:0.4;}}
.cTVlov{display:flex;align-items:center;gap:8px;margin-left:auto;}
@media (min-width: 1100px){.cTVlov{margin-left:0;}}
@media (min-width: 1100px){.dVsNvN.dVsNvN.dVsNvN{display:none;}}
.kikYYe{padding:0 var(--gutter);}
.fgFSGR{padding:72px 0 40px;}
@media (min-width: 800px){.fgFSGR{padding:96px 0 48px;}}
.kJjcyi{display:grid;gap:40px;}
@media (min-width: 1000px){.kJjcyi{grid-template-columns:1.4fr repeat(3,1fr);gap:32px;}}
.guloYw{max-width:340px;}
.guloYw >.sc-f6c0e9c7-1{display:block;margin-top:20px;line-height:1.6;}
.guloYw a{color:var(--black);text-underline-offset:2px;}
.jxcLWb{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 16px;}
@media (min-width: 800px){.jxcLWb{grid-template-columns:repeat(3,1fr);}}
@media (min-width: 1000px){.jxcLWb{display:contents;}}
.jxcLWb:has(a:hover) a:not(:hover){opacity:0.4;}
.bGRehk{display:block;width:fit-content;margin-bottom:12px;font-size:14px;color:var(--black);text-decoration:none;transition:opacity 0.15s;}
.IoQYX{display:flex;flex-direction:column;gap:12px;margin-top:72px;padding-top:24px;border-top:1px solid var(--line);}
@media (min-width: 800px){.IoQYX{flex-direction:row;justify-content:space-between;}}
.IoQYX a{color:var(--black);}
/* Page content only. The tokens, base styles, top bar and footer come from
   the live iconoir.com at build time (see chrome.mjs), so they always match
   the main site. Both end up in one /_static/site.<hash>.css file. */

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow { margin-bottom: 16px; font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; color: var(--mono-ink); }
.hero .eyebrow { margin-bottom: 0; }
h1 { margin: 12px 0 16px; font-size: clamp(36px, 6vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
h2 { margin: 0 0 16px; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.lede { max-width: 640px; margin: 0; font-size: 18px; color: var(--text); }

.hero { display: grid; gap: 32px; align-items: center; margin: 48px 0 72px; }
@media (min-width: 800px) {
  .hero { grid-template-columns: 1fr 360px; align-items: start; }
}

.preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 32px;
  background: var(--band);
}
.preview svg { width: 45%; height: 45%; }
.previews { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.previews figure { margin: 0; }
.previews figcaption { margin-top: 8px; text-align: center; font: 13px var(--mono); color: var(--muted); }

/* Same spacing as the main site's Hero Actions; buttons themselves use the
   main site's classes (see buttonClass in layout.mjs). */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.actions > * { flex: 1 1 100%; }
@media (min-width: 500px) {
  .actions > * { flex: 0 0 auto; }
}

section { margin-bottom: 72px; }

.snippets { display: grid; gap: 16px; }
@media (min-width: 800px) {
  .snippets { grid-template-columns: 1fr 1fr; }
}
.snippet { border: 1px solid var(--line); border-radius: 20px; padding: 20px; min-width: 0; }
.snippet h3 { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.snippet pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--band);
  font: 13px/1.6 var(--mono);
}
.snippet p { margin: 12px 0 0; font-size: 14px; color: var(--text); }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 12px; border-radius: 999px; background: var(--band); font-size: 14px; color: var(--text); }

.related { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.related a {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 20px 8px;
  border-radius: 20px;
  background: var(--band);
  text-decoration: none;
  font-size: 13px;
  color: var(--text);
}
.related svg { width: 28px; height: 28px; }

/* States the live header only gets from React, re-created for chrome.mjs's
   script: the open mobile menu and the rolling version badge. */
header nav[aria-label='Main'].seo-menu-open { transform: none; opacity: 1; pointer-events: all; }

@keyframes seo-roll-in { from { opacity: 0; transform: translateY(70%); } }
@keyframes seo-roll-out { to { opacity: 0; transform: translateY(-70%); } }
header a[title='Changelog'] .seo-roll-in { animation: seo-roll-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
header a[title='Changelog'] .seo-roll-out { position: absolute; left: 0; top: 0; animation: seo-roll-out 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Carbon ad, as styled on the main site (CarbonCoverAd.tsx): the sponsor card
   look instead of Carbon's default grey box. Same selectors under #carbonads,
   so they outrank carbon.js's own styles exactly as they do there. */
.hero-side { display: grid; gap: 16px; }
.carbon-cover { max-width: 360px; }
.carbon-cover #carbonads { margin: 0; }
.carbon-cover #carbonads a { text-decoration: none; }
.carbon-cover #carbonads #carbon-responsive { --carbon-text-color: var(--black); }
.carbon-cover #carbonads #carbon-responsive .carbon-responsive-wrap {
  background-color: var(--band);
  border: none;
  border-radius: 20px;
  transition: box-shadow 0.15s;
}
.carbon-cover #carbonads #carbon-responsive .carbon-responsive-wrap:hover { box-shadow: 0 0 0 1.5px var(--black); }
.carbon-cover #carbonads .carbon-text { font-family: var(--font); font-size: 14px; }
.carbon-cover #carbonads .carbon-poweredby { font-family: var(--mono); font-size: 11px; color: var(--muted); }