/* zplCore.com mobile menu (shared by marketing, docs, demo and 404 pages; behaviour in /js/menu.js).
   Markup: button.hb[aria-controls=<id>] + nav.mnav#<id> placed after the header (not inside: the header's
   backdrop-filter would become the containing block of the fixed panel). The button shows below 1024 px
   (.hb-1000: below 1001 px, the docs sidebar breakpoint). */
:root{--mn-bg:#fff;--mn-fg:#1c2b40;--mn-muted:#5b6475;--mn-line:#e3e7ef;--mn-accent:#c2570a;--mn-hover:#f3f5f9;--mn-scrim:rgba(15,23,42,.28);--mn-shadow:0 18px 48px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--mn-bg:#121a2c;--mn-fg:#e6eaf2;--mn-muted:#a3b1c6;--mn-line:rgba(255,255,255,.12);--mn-accent:#f59a4a;--mn-hover:rgba(255,255,255,.06);--mn-scrim:rgba(2,6,15,.6);--mn-shadow:0 18px 48px rgba(0,0,0,.55)}}
:root[data-theme="dark"]{--mn-bg:#121a2c;--mn-fg:#e6eaf2;--mn-muted:#a3b1c6;--mn-line:rgba(255,255,255,.12);--mn-accent:#f59a4a;--mn-hover:rgba(255,255,255,.06);--mn-scrim:rgba(2,6,15,.6);--mn-shadow:0 18px 48px rgba(0,0,0,.55)}

.hb{display:none;position:relative;flex:none;width:44px;height:44px;padding:0;margin:0;border:1px solid var(--mn-line);border-radius:12px;background:transparent;color:var(--mn-fg);cursor:pointer;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.hb:hover,.hb[aria-expanded="true"]{border-color:var(--mn-accent)}
.hb:focus-visible{outline:2px solid var(--mn-accent);outline-offset:2px}
.hb-box{position:relative;display:block;width:20px;height:14px}
.hb-box>span{position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .15s ease,top .22s ease}
.hb-box>span:nth-child(1){top:0}.hb-box>span:nth-child(2){top:6px}.hb-box>span:nth-child(3){top:12px}
.hb[aria-expanded="true"] .hb-box>span:nth-child(1){top:6px;transform:rotate(45deg)}
.hb[aria-expanded="true"] .hb-box>span:nth-child(2){opacity:0}
.hb[aria-expanded="true"] .hb-box>span:nth-child(3){top:6px;transform:rotate(-45deg)}
.hb[aria-expanded="true"]{color:var(--mn-accent)}

.mnav{position:fixed;left:0;right:0;bottom:0;top:var(--mnav-top,64px);z-index:70;background:var(--mn-scrim);padding:8px 12px 12px;font-family:inherit}
.mnav[hidden]{display:none}
.mnav-panel{max-width:640px;margin:0 auto;max-height:100%;overflow:auto;overscroll-behavior:contain;background:var(--mn-bg);color:var(--mn-fg);border:1px solid var(--mn-line);border-top:3px solid var(--mn-accent);border-radius:16px;box-shadow:var(--mn-shadow);padding:8px;animation:mnav-in .18s ease-out}
@keyframes mnav-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mnav-h{margin:12px 12px 4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mn-muted)}
.mnav-h:first-child{margin-top:6px}
.mnav a,.mnav-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border-radius:10px;color:var(--mn-fg);text-decoration:none;font-size:16px;line-height:1.3;font-weight:500;overflow-wrap:anywhere}
.mnav a:hover,.mnav-btn:hover{background:var(--mn-hover);text-decoration:none}
.mnav a:focus-visible,.mnav-btn:focus-visible{outline:2px solid var(--mn-accent);outline-offset:-2px}
.mnav a.sub{padding-left:28px;font-size:14.5px;font-weight:400;color:var(--mn-muted)}
.mnav a.on,.mnav a[aria-current]{color:var(--mn-accent);background:color-mix(in srgb,var(--mn-accent) 11%,transparent);font-weight:600;box-shadow:inset 3px 0 0 var(--mn-accent)}
.mnav a[target="_blank"]::after{content:"↗";margin-left:auto;color:var(--mn-muted);font-size:14px}
.mnav-sep{height:1px;margin:8px 4px;background:var(--mn-line);border:0}
.mnav-btn{width:100%;border:0;background:transparent;font:inherit;font-size:16px;font-weight:500;cursor:pointer;text-align:left}
.mnav-btn .mnav-ico{width:20px;text-align:center;color:var(--mn-accent)}
body.mnav-lock{overflow:hidden}

@media (max-width:1023.98px){.hb:not(.hb-1000){display:inline-flex}}
@media (max-width:1000px){.hb.hb-1000{display:inline-flex}}
@media (min-width:1024px){.mnav:not(.mnav-1000){display:none!important}}
@media (min-width:1001px){.mnav.mnav-1000{display:none!important}}
@media (prefers-reduced-motion:reduce){.hb-box>span,.mnav-panel{transition:none;animation:none}}