/* A circular disclosure with links on the page, outside the header's flow. */
.site-header,.site-header:has(.menu.open){height:62px;background:rgba(236,244,250,.64);border:1px solid rgba(255,255,255,.45);border-radius:38px;box-shadow:0 8px 32px rgba(11,30,66,.10),inset 0 1px 0 rgba(255,255,255,.5);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);pointer-events:none}
.site-header>.w{position:relative;height:100%}
.site-header .nav,.page-index .site-header .nav{height:100%;align-items:center}
.site-header .logo,.site-header .burger{pointer-events:auto}
.site-header .logo{transition:color .2s}
.site-header .logo[data-surface="dark"]{color:#f5f7fa}
.site-header .logo[data-surface="dark"] .acc{color:#9cc8de}
.site-header .logo[data-surface="dark"] .by{color:#b1c4d2}
.site-header .navlinks{display:none}
.site-header .burger{display:flex;width:52px;height:52px;flex-shrink:0;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(247,251,255,.38);color:#0b1e42;position:relative;transition:background .2s,transform .25s}
.site-header .burger:hover{background:#e7eff4;transform:scale(1.04)}
.site-header .burger svg{display:none}
.site-header .burger:before,.site-header .burger:after{content:"";position:absolute;width:19px;height:1px;background:currentColor;transition:transform .3s cubic-bezier(.22,.8,.24,1)}
.site-header .burger:before{transform:translateY(-4px)}
.site-header .burger:after{transform:translateY(4px)}
.site-header .burger[aria-expanded="true"]:before{transform:rotate(45deg)}
.site-header .burger[aria-expanded="true"]:after{transform:rotate(-45deg)}
.site-header .menu,.site-header .menu.open{position:absolute;display:flex;align-items:flex-end;top:calc(100% + 18px);right:12px;width:max-content;max-width:calc(100vw - 48px);max-height:calc(100dvh - 112px);margin:0 -6px 0 0;padding:4px 6px;gap:4px;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;visibility:hidden;pointer-events:none;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;transition:visibility 0s .24s}
.site-header .menu a{display:block;min-height:44px;padding:5px 0;font:500 18px/1.4 var(--display);letter-spacing:-.025em;text-align:right;color:var(--ink);background:transparent;border:0;box-shadow:none;opacity:0;transform:translateY(-16px);transition:opacity .2s,transform .3s cubic-bezier(.22,.8,.24,1),color .15s}
.site-header .menu a[data-surface="dark"]{color:#f5f7fa}
.site-header .menu a:hover,.site-header .menu a:focus-visible{color:#739db7}
.site-header .menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.site-header .menu.open a{opacity:1;transform:translateY(0);transition-delay:calc(var(--menu-order,0) * 45ms)}
@media(max-width:600px){
 .site-header,.site-header:has(.menu.open){height:56px;border-radius:32px}
 .site-header .logo .wm{font-size:26px}
 .site-header .menu,.site-header .menu.open{right:8px;top:calc(100% + 18px);gap:4px}
 .site-header .menu a{font-size:18px}
}
@media(max-width:1100px){
 .hero-window-stage .hero,main>.sec,main>section,main>.framework-chapter,.crumb,footer>*{transition:opacity .2s}
 .nav-is-open .hero-window-stage .hero,.nav-is-open main>.sec,.nav-is-open main>section,.nav-is-open main>.framework-chapter,.nav-is-open .crumb,.nav-is-open footer>*{opacity:.09}
}
@media(prefers-reduced-motion:reduce){.site-header *,.site-header :before,.site-header :after{transition:none!important}}
@media print{.site-header .burger,.site-header .menu{display:none!important}.site-header .navlinks{display:flex}}
/* The brand and circular control share the restored floating bar. */
.site-header .logo{padding:0;margin-left:0;border-radius:0;background:transparent;align-self:center;transform:translate(-2mm,.5px)}
.site-header .logo,.site-header .logo[data-surface="dark"]{color:var(--ink)}
.site-header .logo[data-surface="dark"] .acc{color:var(--blue)}
.site-header .logo[data-surface="dark"] .by{color:var(--muted)}
main>.sec,main>section,main>.framework-chapter,.crumb,footer>*{transition:opacity .2s}
.nav-is-open main>.sec,.nav-is-open main>section,.nav-is-open main>.framework-chapter,.nav-is-open .crumb,.nav-is-open footer>*{opacity:.09}

/* A compact bar enters after the first scroll; keyboard focus can reveal it. */
.site-header{width:min(420px,calc(100% - 32px))}
.site-header[data-scroll-reveal="true"]{transition:opacity .24s,transform .3s cubic-bezier(.22,.8,.24,1)}
.site-header[data-scroll-reveal="true"]:not(.is-visible):not(:has(:focus-visible)){opacity:0;transform:translate(-50%,-14px)}
.site-header[data-scroll-reveal="true"]:not(.is-visible):not(:has(:focus-visible)) .logo,.site-header[data-scroll-reveal="true"]:not(.is-visible):not(:has(:focus-visible)) .burger{pointer-events:none}
@media(prefers-reduced-motion:reduce){.site-header[data-scroll-reveal="true"]{transition:none}}
@media print{.site-header[data-scroll-reveal="true"]{opacity:1!important;transform:none!important}}