@import url('/brand-palette.css?v=20261022-b');
/* One header for every page that is not a demo: docs, articles, write-ups. Same items as the homepage header. */
@font-face{font-family:XhManrope;src:url('/media/manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}
.xh{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ex-page) 94.12%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--ex-line);font:600 13px/1.2 XhManrope,Arial,sans-serif;color:var(--ex-text)}
/* Older page styles (site-theme.css, article styles) set padding, gaps and wrapping on every <header>; the shared header ignores them. */
header.xh{display:block!important;padding:0!important;margin:0!important;gap:0!important;flex-wrap:nowrap!important;font-size:13px;border-top:0!important;border-left:0!important;border-right:0!important}
.xh .lang-links{gap:0!important}
.xh *{box-sizing:border-box}
.xh-row{max-width:1320px;margin:0 auto;height:72px;padding:0 32px;display:flex;align-items:center;gap:24px}
.xh a{color:inherit;text-decoration:none}
.xh-logo{flex-shrink:0;display:flex}
.xh-logo img{width:132px;height:28px;object-fit:contain;filter:none}
.xh-nav{display:flex;gap:24px;margin:0 auto;white-space:nowrap}
.xh-nav a:hover,.xh-download:hover{color:var(--ex-link)}
.xh-nav a[aria-current]{color:var(--ex-link)}
.xh-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.xh .lang-links{display:flex;border:1px solid var(--ex-control-border);border-radius:7px;overflow:hidden;background:var(--ex-surface);margin:0;padding:0}
.xh .lang-links a{font-size:11px;padding:8px 9px;color:var(--ex-muted);border:0;margin:0}
.xh .lang-links a[aria-current]{background:var(--ex-ink);color:var(--ex-paper)}
.xh .xh-download{background:var(--ex-primary);color:var(--ex-on-primary);border-radius:7px;padding:10px 16px;font-weight:700;box-shadow:inset 0 0 0 1px var(--ex-primary-border);transition:background .15s,transform .15s}
.xh .xh-download:hover{background:var(--ex-primary-hover);color:var(--ex-on-primary);transform:translateY(-1px)}
.xh .theme-toggle,.xh #th{min-height:0;min-width:0;line-height:1.2;font:inherit;font-size:12px;border:1px solid var(--ex-control-border);border-radius:7px;background:var(--ex-surface);color:var(--ex-text);padding:8px 10px;cursor:pointer}
html[data-lm=false] .xh{background:color-mix(in srgb,var(--ex-page) 94.12%,transparent);border-color:var(--ex-line);color:var(--ex-text)}
html[data-lm=false] .xh-logo img{content:url('/extella-logo-on-dark.svg');filter:none}
html[data-lm=false] .xh .lang-links,html[data-lm=false] .xh .theme-toggle,html[data-lm=false] .xh #th{background:var(--ex-surface);border-color:var(--ex-control-border);color:var(--ex-text)}
html[data-lm=false] .xh .lang-links a[aria-current]{background:var(--ex-text);color:var(--ex-page)}
@media(max-width:1040px){.xh-nav{gap:16px}}
@media(max-width:820px){
  .xh-row{flex-wrap:wrap;height:auto;padding:12px 16px 0;gap:10px}
  .xh-actions{margin-left:auto}
  .xh-nav{order:3;width:100%;margin:0;padding:4px 0 12px;gap:8px 18px;flex-wrap:wrap;white-space:normal}
}