/* Navigator overlay (nav.js). Sized to the window, not the 1920 stage, so it stays readable at 1280×720. */
#nav{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start;justify-content:center;padding-top:6vh;background:rgba(3,8,20,.9);font-family:inherit;color:#E8EEF8}
#nav[hidden]{display:none}
#nav .nv-box{width:min(1180px,94vw);max-height:86vh;display:flex;flex-direction:column;border-radius:18px;background:linear-gradient(180deg,#101F42,#0A1530);border:1px solid rgba(127,176,255,.28);box-shadow:0 40px 90px -30px rgba(0,0,0,.85);overflow:hidden}
#nav .nv-top{display:flex;gap:14px;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(142,163,192,.16)}
#nav #nv-q{flex:1;min-width:0;height:48px;padding:0 16px;border-radius:12px;border:1px solid rgba(127,176,255,.35);background:rgba(4,12,30,.7);color:#fff;font:inherit;font-size:18px;outline:none}
#nav #nv-q:focus{border-color:#8FBAFF;box-shadow:0 0 0 3px rgba(127,176,255,.18)}
#nav .nv-tabs{display:flex;padding:4px;border-radius:12px;background:rgba(190,208,235,.06)}
#nav .nv-tabs button{border:0;background:none;color:#9FB0CC;font:inherit;font-size:15px;padding:9px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
#nav .nv-tabs button[aria-selected="true"]{background:rgba(42,99,230,.45);color:#fff}
#nav kbd{display:inline-block;min-width:18px;margin:0 2px;padding:1px 5px;border-radius:5px;border:1px solid rgba(142,163,192,.35);font:inherit;font-size:12px;line-height:16px;text-align:center;color:#BFD0EA}
#nav .nv-ret:empty{display:none}
#nav .nv-rb{display:flex;align-items:center;gap:8px;width:100%;padding:10px 20px;border:0;border-bottom:1px solid rgba(142,163,192,.14);background:rgba(240,166,58,.08);color:#F0C27A;font:inherit;font-size:15px;text-align:left;cursor:pointer}
#nav .nv-rb b{color:#fff;font-weight:600}
#nav .nv-rb.on,#nav .nv-rb:hover{background:rgba(240,166,58,.16)}
#nav .nv-body{overflow:auto;padding:16px 18px 18px;min-height:200px}
#nav .nv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
#nav .nv-sc{display:flex;flex-direction:column;gap:4px;padding:8px 8px 10px;border-radius:12px;border:1px solid rgba(142,163,192,.18);background:rgba(255,255,255,.02);color:inherit;font:inherit;text-align:left;cursor:pointer}
#nav .nv-th{display:block;aspect-ratio:16/9;border-radius:8px;background:#0B1735 center/cover no-repeat;border:1px solid rgba(142,163,192,.14)}
#nav .nv-sc b{margin-top:4px;font-size:15px;font-weight:600;color:#fff}
#nav .nv-sc b em{margin-right:6px;font-style:normal;color:#8FBAFF;font-variant-numeric:tabular-nums}
#nav .nv-sc small{font-size:13px;color:#8EA3C0}
#nav .nv-sc.cur{border-color:#8FBAFF;box-shadow:inset 0 0 0 1px #8FBAFF}
#nav .nv-sc.on,#nav .nv-sc:hover{background:rgba(42,99,230,.22);border-color:#AFCBFF}
#nav .nv-it{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#nav .nv-it b{font-size:16px;font-weight:600;color:#fff}
#nav .nv-it .nv-sub{grid-column:1;display:flex;align-items:center;gap:6px;font-size:13px;color:#8EA3C0}
#nav .nv-it em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-size:13px;color:#8FBAFF;opacity:.6}
#nav .nv-it.on,#nav .nv-it:hover{background:rgba(42,99,230,.24)}
#nav .nv-it.on em{opacity:1}
#nav .nv-h{margin:12px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7F93B2}
#nav .nv-h:first-child{margin-top:0}
#nav .nv-empty{margin:24px 12px;color:#9FB0CC}
#nav .nv-app{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
#nav .nv-g{padding:12px 8px 12px;border-radius:14px;border:1px solid rgba(142,163,192,.16);background:rgba(255,255,255,.02)}
#nav .nv-g h3{margin:0 8px 6px;font-size:16px;font-weight:700;color:#fff}
#nav .nv-g h3 em{margin-right:8px;font-style:normal;color:#8FBAFF}
#nav .nv-g .nv-it{padding:7px 8px}
#nav .nv-g .nv-it b{font-size:15px;font-weight:500}
#nav .nv-st{width:7px;height:7px;border-radius:50%;background:#8EA3C0}
#nav .nv-st.blue{background:#7FB0FF}#nav .nv-st.amber{background:#F0A63A}
#nav .nv-codes,#nav .nv-qa{display:flex;flex-wrap:wrap;gap:6px;margin:8px 8px 0}
#nav .nv-cd{padding:5px 10px;border-radius:999px;border:1px solid rgba(142,163,192,.3);background:none;color:#CFE0FF;font:inherit;font-size:13px;cursor:pointer}
#nav .nv-cd.q{border-color:rgba(127,176,255,.4)}
#nav .nv-cd i{font-style:normal;color:#8EA3C0;margin-left:4px}
#nav .nv-cd.on,#nav .nv-cd:hover{background:rgba(42,99,230,.3);color:#fff}
#nav .nv-srcs{margin-top:14px;display:grid;gap:8px}
#nav .nv-src{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#nav .nv-src>span{width:180px;font-size:13px;color:#8EA3C0}
#nav .nv-help{display:flex;flex-wrap:wrap;gap:18px;padding:10px 18px;border-top:1px solid rgba(142,163,192,.14);font-size:13px;color:#8EA3C0}
@media (max-height:780px){#nav{padding-top:3vh}#nav .nv-box{max-height:92vh}}
/* on-screen navigation pill (bottom-left), shown on mouse move; the return button stays faintly visible while there is somewhere to return to */
#navpill{position:fixed;left:16px;bottom:16px;z-index:8500;display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;background:rgba(6,14,38,.9);box-shadow:0 0 0 1px rgba(127,176,255,.28),0 12px 30px -12px rgba(0,0,0,.8);font-size:15px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .25s}
#navpill.on{opacity:1;transform:none;pointer-events:auto}
#navpill button{border:0;background:none;color:#DCE6F5;font:inherit;cursor:pointer;height:38px;padding:0 12px;border-radius:999px;white-space:nowrap}
#navpill button:hover{background:rgba(42,99,230,.4);color:#fff}
#navpill [data-p="prev"],#navpill [data-p="next"]{width:38px;padding:0;font-size:22px;line-height:1}
#navpill .np-toc{display:flex;align-items:center;gap:8px;font-weight:600}
#navpill .np-toc i{font-style:normal;color:#8FBAFF}
#navpill .np-ret{margin-left:4px;background:rgba(240,166,58,.14);color:#F3C784}
#navpill .np-ret[hidden]{display:none}
#navpill.keep:not(.on){opacity:1;transform:none;pointer-events:auto;background:none;box-shadow:none}
#navpill.keep:not(.on) button:not(.np-ret){display:none}
#navpill.keep:not(.on) .np-ret{opacity:.6}
#navpill.keep:not(.on) .np-ret:hover{opacity:1}
body.qa100-active #navpill,body.nav-open #navpill,body.presenter #navpill{display:none}
@media (max-width:1400px){#navpill{font-size:14px}#navpill button{height:34px}}
#stage.clean #crumb{display:none!important}
#nav .nv-scw{position:relative;display:flex}
#nav .nv-scw .nv-sc{flex:1}
#nav .nv-play{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;font-size:13px;color:#fff;background:rgba(6,14,38,.82);box-shadow:0 0 0 1.5px rgba(156,195,255,.6);cursor:pointer;opacity:.85}
#nav .nv-play:hover{background:#2A63E6;opacity:1}