/* The 90n nav (scripts/90n/partials.mjs) on pages that do not load /90n/styles.css: the guides
   and the blog articles. Its rules from styles.css, scoped to #nav. */
   scoped so they leave the guide's own <nav> elements (the contents panel) alone */
#nav{--star:#FFF3DC;--muted:#B5ABD6;--dim:#8E84B5;--gold:#FFE7B0;--line:rgba(255,243,220,.12);
  --body:var(--n90-text,'Inter',system-ui,sans-serif);--label:var(--n90-text,'Inter',system-ui,sans-serif);
  position:absolute;top:0;left:0;right:0;z-index:50;font-family:var(--body);color:var(--star)}
#nav .wrap{max-width:1160px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:84px}
#nav a{color:inherit}
#nav .wm{position:relative;font-family:var(--body);font-weight:500;font-size:32px;letter-spacing:-.5px;text-decoration:none;text-shadow:0 0 16px rgba(255,230,180,.35);padding-right:14px;color:var(--star)}
#nav .wm svg{position:absolute;right:-6px;top:-6px;width:17px;height:17px;filter:drop-shadow(0 0 6px rgba(255,230,170,.9))}
#nav .links{display:flex;gap:38px;list-style:none;align-items:center;margin:0;padding:0}
#nav .links > li{position:relative}
#nav .links a,#nav .links button{color:var(--muted);text-decoration:none;font-family:var(--label);font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:0}
#nav .links a:hover,#nav .links button:hover,#nav .links button[aria-expanded="true"]{color:var(--star)}
#nav .chev{width:9px;height:9px;transition:transform .2s}
#nav button[aria-expanded="true"] > .chev{transform:rotate(180deg)}
#nav .menu{position:absolute;right:-14px;top:calc(100% + 16px);min-width:230px;padding:8px;margin:0;border-radius:16px;list-style:none;background:rgba(28,18,72,.96);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4);opacity:0;transform:translateY(-6px);pointer-events:none;transition:.18s}
#nav .menu.open{opacity:1;transform:none;pointer-events:auto}
#nav .menu a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;letter-spacing:.02em;text-transform:none;font-size:14px;color:var(--star)}
#nav .menu a:hover{background:rgba(255,255,255,.06)}
#nav .menu-ico{width:20px;height:20px;flex:none;color:var(--gold)}
#light{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen}
@media (max-width:680px){
  #nav .links{gap:16px}
  #nav .links a,#nav .links button{font-size:10.5px;letter-spacing:.1em}
  #nav .wm{font-size:26px}
  #nav .menu{right:-8px}
}

/* The nav sits above everything on the page: the guides' and articles' heroes come later in the
   page and would otherwise cover the open Resources menu (dimming it and taking its clicks). */
#nav{z-index:1000!important}
#nav .menu{z-index:1001}
#nav .menu a,#nav .menu a:visited{color:#FFF3DC!important;font-weight:500}
#nav .wm,#nav .links button[aria-expanded="true"]{color:#FFF3DC!important}
#nav .menu a .menu-ico{color:#FFE7B0!important}

/* One button across 90n.ai: the yellow pill of the calls to action (public/90n/cta.css .cta90-btn).
   The guides' own primary buttons take it too. */
html body .hero-cta-btn,html body .toc-download-btn,html body .modal .m-submit,html body .modal .m-dl,html body .cta-link{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 24px!important;border:0!important;border-radius:999px!important;
  background:#FFD84A!important;color:#110A2C!important;font:600 15px/1.2 var(--n90-text,'Inter',system-ui,sans-serif)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none;
  box-shadow:0 0 0 6px rgba(255,216,74,.12)!important;transition:transform .15s,box-shadow .15s}
html body .hero-cta-btn:hover,html body .toc-download-btn:hover,html body .modal .m-submit:hover,html body .modal .m-dl:hover,html body .cta-link:hover{
  transform:translateY(-1px);box-shadow:0 0 0 8px rgba(255,216,74,.18)!important}
/* the Ask ChatGPT / Claude / Perplexity buttons: the home page's ghost pill */
html body .ua-btn{min-height:52px;padding:0 18px!important;border-radius:999px!important;border:1px solid rgba(255,243,220,.2)!important;background:rgba(255,255,255,.04)!important;
  color:#FFF3DC!important;font:500 15px/1.2 var(--n90-text,'Inter',system-ui,sans-serif)!important;box-shadow:none!important}
html body .ua-btn:hover{border-color:rgba(255,231,176,.5)!important;background:rgba(255,231,176,.08)!important;transform:none}