/* zplCore.com shared base styles (all pages: home, docs, demo, 404; DE/EN). External, so the CSP needs no hashes.
   1) concealed scrollbars: thin, translucent thumb in the page tint, no track, shown on hover/focus/scroll
      (Firefox + Chromium via scrollbar-width/-color; older WebKit via ::-webkit-scrollbar)
   2) soft edge fade on horizontally scrollable areas (classes set by /js/theme.js: .sx-l / .sx-r)
   3) legal links in the footer (.legal) */
:root{--sb-thumb:rgba(28,43,64,.28);--sb-thumb-h:rgba(28,43,64,.45)}
:root[data-theme="dark"]{--sb-thumb:rgba(226,232,240,.22);--sb-thumb-h:rgba(226,232,240,.4)}
html{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover,*:focus-within,.is-scrolling{scrollbar-color:var(--sb-thumb) transparent}
html,body{scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:6px;height:6px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
:hover::-webkit-scrollbar-thumb,.is-scrolling::-webkit-scrollbar-thumb,html::-webkit-scrollbar-thumb{background:var(--sb-thumb)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h)}
.sx-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.sx-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.sx-l.sx-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
.legal{display:flex;flex-wrap:wrap;gap:4px 20px;margin:12px 0 0;font-size:inherit}
.legal a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.legal a:hover{color:var(--mn-accent,#c2570a)}
/* header logo lockup (all pages): mark + wordmark; compact wordmark without tagline below 768 px */
.brand-lockup{display:flex;align-items:center;gap:10px;flex:none;min-width:0;text-decoration:none}
.brand-lockup img{display:block;max-width:none}
.brand-lockup .mk{width:40px;height:40px;object-fit:contain}
.brand-lockup .wm img{height:36px;width:auto}
.brand-lockup .bl-d{display:none}
:root[data-theme="dark"] .brand-lockup .bl-l{display:none}
:root[data-theme="dark"] .brand-lockup .bl-d{display:block}
@media (max-width:767.98px){.brand-lockup{gap:8px}.brand-lockup .mk{width:28px;height:28px}.brand-lockup .wm img{height:26px}}
.hb{color:var(--mn-fg);border-color:color-mix(in srgb,var(--mn-fg) 22%,transparent)}
/* theme toggle icon (inline SVG) */
.ti{display:block;width:18px;height:18px}
.mnav-ico .ti{margin:0 auto}