/* Floating section menu. Appears once the reader scrolls past the first
   screen, on the homepage and on case pages alike. */
.page-nav{position:fixed;z-index:100;top:max(16px,env(safe-area-inset-top));right:max(var(--gutter),calc((100vw - 1440px) / 2 + var(--gutter)));display:flex;gap:3px;padding:5px;border:1px solid rgb(255 255 255 / .13);border-radius:14px;background:rgb(19 19 22 / .78);box-shadow:0 8px 36px rgb(0 0 0 / .2),inset 0 1px rgb(255 255 255 / .04);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .25s}
.page-nav.is-visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.page-nav a{display:flex;justify-content:center;align-items:center;min-width:76px;min-height:38px;padding:8px 16px;border-radius:9px;color:#ababaf;font-size:14px;line-height:20px;letter-spacing:-.01em;transition:background .2s,color .2s}
.page-nav a:hover{color:#fff;background:rgb(255 255 255 / .045)}
.page-nav a[aria-current="location"]{color:#f2f2f0;background:rgb(255 255 255 / .1);box-shadow:inset 0 1px rgb(255 255 255 / .07)}
.page-nav a:focus-visible{outline:1px solid #ddd;outline-offset:1px;border-radius:9px}
.page-nav .page-nav__mark{display:grid;place-items:center;flex:none;width:40px;min-height:38px;min-width:0;padding:0;border:0;border-radius:9px;background:none;color:#e7e7e3;cursor:pointer;margin-right:11px;position:relative}
.page-nav__mark svg{width:34px;height:28px}
.page-nav__mark::after{content:"";position:absolute;right:-7px;top:8px;bottom:8px;width:1px;background:#ffffff29;pointer-events:none}
.page-nav__mark [hidden]{display:none}
.page-nav__mark:hover{background:#ffffff10}
.page-nav__mark:focus-visible{outline:1px solid #ddd;outline-offset:1px}
html.has-home-nav{scroll-behavior:smooth}
@supports not (backdrop-filter:blur(20px)){.page-nav{background:#161619}}
@media(max-width:767px){
 .page-nav{top:max(12px,env(safe-area-inset-top))}
 .page-nav a{min-height:40px;min-width:66px;padding-inline:12px}
 /* Case pages keep their chapter strip at the top, so the menu docks at the bottom. */
 .page-nav--case{top:auto;bottom:max(14px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translate(-50%,10px)}
 .page-nav--case.is-visible{transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
 html.has-home-nav{scroll-behavior:auto}
 .page-nav,.page-nav a{transition:none}
}