/* A continuous, solid navigation surface above the warm page. */
html{scroll-padding-top:112px}
.header{position:sticky;top:0;z-index:100;height:84px;background:#182641;border:0;color:#fff}
.header #navigation{background:#182641;border-color:#334762}
.header #navigation a,.header .language,.header .menu-toggle{color:#f6f8ff}
.header #navigation a:hover,.header .language:hover{color:#bdd2ff}
.header #navigation a{font-size:15px;font-weight:500;padding-block:10px}
.header .brand{width:162px}
.header a:focus-visible,.header button:focus-visible{outline-color:#a8c7ff}
.header .menu-toggle{min-width:44px;min-height:44px}
.header .header-demo{background:#cb3344;color:#fff}
.header .header-demo:hover{background:#a92335;transform:none}
.skip{z-index:110}
.case-toc{top:112px}
.header{view-transition-name:site-navigation}
main{view-transition-name:page-content}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root),::view-transition-old(site-navigation),::view-transition-new(site-navigation){animation:none;mix-blend-mode:normal}
::view-transition-old(page-content){animation:page-leave 120ms ease-out both}
::view-transition-new(page-content){animation:page-arrive 280ms cubic-bezier(.16,1,.3,1) both}
@keyframes page-leave{to{opacity:0}}
@keyframes page-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.header #navigation{top:84px;max-height:calc(100dvh - 84px);overflow-y:auto}.header #navigation a{font-size:17px}}
@media(max-width:800px){html{scroll-padding-top:102px}.header{height:74px}.header .brand{width:142px}.header #navigation{top:74px;max-height:calc(100dvh - 74px)}.case-toc{top:auto}}
@media(prefers-reduced-motion:reduce){::view-transition-old(page-content),::view-transition-new(page-content){animation:none}}