.page-markers{position:fixed;z-index:19;left:24px;bottom:26px;display:flex;flex-direction:row;gap:0;opacity:1;transition:opacity .7s ease}
.page-markers[hidden]{display:none!important}
.page-markers a{position:relative;display:flex;align-items:center;justify-content:center;width:23px;height:44px;text-decoration:none;border-radius:14px;outline-offset:2px}
.page-mark{width:4px;height:4px;border-radius:50%;background:#ffffffb8;box-shadow:0 0 2px #0008;transition:transform .35s,background .35s}
.page-markers .current .page-mark{transform:scale(1.5);background:#fff}
.page-markers a:hover .page-mark,.page-markers a:focus-visible .page-mark{transform:scale(1.7);background:#fff}
.page-marker-label{position:absolute;left:50%;bottom:calc(100% + 3px);transform:translate(-50%,4px);white-space:nowrap;font-size:11px;letter-spacing:.1em;color:#fff;text-shadow:0 1px 5px #0009;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.page-markers a:hover .page-marker-label,.page-markers a:focus-visible .page-marker-label{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){body.idle .page-markers{opacity:0;pointer-events:none}body.idle:has(.page-markers:hover,.page-markers:focus-within) .page-markers{opacity:1;pointer-events:auto}body.idle .top{opacity:0;pointer-events:none}.top{transition:opacity .7s ease}.top:hover,.top:focus-visible{opacity:1;pointer-events:auto}}
@media(max-width:700px){.page-markers{left:8px;bottom:24px}}
@media(prefers-reduced-motion:reduce){.page-markers,.page-mark,.page-marker-label{transition:none}}
.page-markers{left:22px;bottom:12px}
@media(max-width:700px){.page-markers{left:8px;bottom:12px}}
.page-markers,.top{transition:opacity .85s ease}

html[data-mobile-page=home] .page-markers{display:none!important}