/* The nav keeps its existing grid and breakpoints. Only its optical surface and
   response to interaction change; the galaxy remains visible through it. */
#glassNav{
 --liquid-ink:#e6f1fc;
 --liquid-active-ink:#ffffff;
 --liquid-shadow:#000c;
 --liquid-tint:rgba(100,155,199,.055);
 --liquid-edge:rgba(223,243,255,.31);
 --liquid-lens-top:rgba(235,250,255,.22);
 --liquid-lens-bottom:rgba(121,181,223,.065);
 --liquid-lens-line:rgba(238,251,255,.46);
 background:linear-gradient(150deg,rgba(231,247,255,.085),transparent 34%,rgba(120,171,206,.035) 72%,rgba(226,245,255,.07)),var(--liquid-tint);
 border-color:var(--liquid-edge);
 box-shadow:inset 0 1px 0 #f3fbff85,inset 0 -1px 0 #b7d9f01a,inset 1px 0 1px #e7f6ff30,inset -1px 0 1px #e7f6ff30,0 5px 20px #00000012;
 backdrop-filter:blur(8px) saturate(1.5) brightness(1.08);
 -webkit-backdrop-filter:blur(8px) saturate(1.5) brightness(1.08);
 overflow:visible;
}
#glassNav::before{
 content:"";position:absolute;inset:1px;border:1px solid transparent;border-radius:inherit;pointer-events:none;z-index:3;
 background:linear-gradient(135deg,#ffffff8a,transparent 22%,transparent 66%,#d5efff45) border-box;
 mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;
 -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 opacity:.68;
}
#glassNav>a,#glassNav .theme-toggle{
 color:var(--liquid-ink);text-shadow:0 1px 3px var(--liquid-shadow);
 transition:color .16s,opacity .16s;
}
#glassNav>a[aria-current]{color:var(--liquid-active-ink);font-weight:500}
#glassNav>a:hover,#glassNav .theme-toggle:hover{color:var(--liquid-active-ink)}
#glassNav>a::before{
 content:"";position:absolute;inset:3px 2px;border-radius:999px;pointer-events:none;
 background:radial-gradient(ellipse at 50% 0,#e4f7ff29,transparent 74%);
 box-shadow:inset 0 1px 0 #eafaff24;
 opacity:0;transition:opacity .18s;
}
#glassNav>a:hover::before,#glassNav>a:focus-visible::before{opacity:1}
#glassNav>a[aria-current]::after{display:none}
#glassNav :is(a,button):focus-visible{outline:2px solid #d2efff;outline-offset:2px;border-radius:999px}
#glassNav .theme-toggle::before{background:linear-gradient(transparent,#d2eaff4a,transparent)}
#glassNav .nav-indicator{
 background:linear-gradient(155deg,var(--liquid-lens-top),rgba(221,243,255,.085) 32%,rgba(93,153,200,.025) 61%,var(--liquid-lens-bottom));
 border-color:var(--liquid-lens-line);
 box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 1px #d3efff69,inset 2px 0 3px #e6f8ff24,inset -2px 0 3px #e6f8ff24,0 3px 8px #00000016;
 backdrop-filter:blur(3px) saturate(1.35) brightness(1.12);
 -webkit-backdrop-filter:blur(3px) saturate(1.35) brightness(1.12);
 transform-origin:50% 50%;
 transition:transform .45s cubic-bezier(.2,.85,.2,1);
}
#glassNav .nav-indicator::before{
 content:"";position:absolute;inset:1px 9% auto;height:42%;border-radius:50%;pointer-events:none;
 background:radial-gradient(ellipse at 50% 0,#ffffff51,transparent 73%);opacity:.75;
}
#glassNav .nav-indicator::after{
 content:"";position:absolute;left:18%;right:18%;bottom:1px;height:1px;border-radius:50%;pointer-events:none;
 background:linear-gradient(90deg,transparent,#e6fbffb3,transparent);opacity:.8;
}
#glassNav.liquid-nav-ready .nav-indicator{transition:none}
#glassNav .nav-reflection{
 position:absolute;inset:1px;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
 transition:opacity .2s;
}
#glassNav .nav-reflection>i{
 display:block;position:absolute;left:-65px;top:-35%;width:130px;height:170%;pointer-events:none;
 background:linear-gradient(110deg,transparent 18%,#e8f9ff04 32%,#e8f9ff36 49%,#d0eaff08 60%,transparent 78%);
 transform:translate3d(-150px,0,0);border-radius:50%;
}
#glassNav.is-catching-light .nav-reflection{opacity:.7}
.studio.inside-blog:not(.reading-dark) #glassNav{
 --liquid-ink:#29455d;
 --liquid-active-ink:#142e45;
 --liquid-shadow:#ffffff65;
 --liquid-tint:rgba(255,255,255,.045);
 --liquid-edge:rgba(255,255,255,.62);
 --liquid-lens-top:rgba(255,255,255,.29);
 --liquid-lens-bottom:rgba(193,220,239,.08);
 --liquid-lens-line:rgba(255,255,255,.74);
 box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #91b6d036,inset 1px 0 1px #ffffff65,inset -1px 0 1px #ffffff65,0 4px 16px #112c4510;
}
.studio.inside-blog:not(.reading-dark) #glassNav :is(a,button):focus-visible{outline-color:#315f83}
.studio.inside-blog:not(.reading-dark) #glassNav .theme-toggle::before{background:linear-gradient(transparent,#315f833a,transparent)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 #glassNav{background:#10273bc2}
 .studio.inside-blog:not(.reading-dark) #glassNav{background:#dfecf5de}
}
@media(prefers-reduced-motion:reduce){
 #glassNav .nav-indicator,#glassNav>a,#glassNav>a::before,#glassNav .theme-toggle,#glassNav .nav-reflection{transition:none}
 #glassNav .nav-reflection{display:none}
}
@media(forced-colors:active){
 #glassNav{border:1px solid ButtonText;background:Canvas;backdrop-filter:none;-webkit-backdrop-filter:none}
 #glassNav::before,#glassNav .nav-reflection,#glassNav>a::before,#glassNav .nav-indicator::before,#glassNav .nav-indicator::after{display:none}
 #glassNav>a,#glassNav>a[aria-current],#glassNav .theme-toggle{color:ButtonText;text-shadow:none}
 #glassNav .nav-indicator{background:Canvas;border:2px solid Highlight;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}