html.pf-sc-s, html.pf-sc-p { scroll-snap-type: y mandatory; }
.pf-sc-marks { position: absolute; top: 0; left: 0; width: 1px; height: 0; pointer-events: none; visibility: hidden; }
.pf-sc-marks > i { position: absolute; left: 0; width: 1px; scroll-snap-align: start; }
html.pf-sc-p .pf-sc-marks > i { scroll-snap-stop: always; }
html.pf-sc-go { scroll-snap-type: none; }

html.pf-sb-a { scrollbar-width: thin; scrollbar-color: var(--pf-sc-acc, #8b93f5) transparent; }
html.pf-sb-h { scrollbar-width: none; }
html.pf-sb-h::-webkit-scrollbar { display: none; width: 0; height: 0; }

.pf-sc-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: 2px; pointer-events: none; background: var(--pf-acc-b, var(--pf-acc, #fff)); transform-origin: 0 50%; transform: scaleX(var(--pf-sc-p, 0)); }

.pf-sc-dots { position: fixed; right: 16px; top: 50%; z-index: 140; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 999px; background: rgba(0,0,0,.35); transform: translateY(-50%); }
.pf-sc-dots[hidden] { display: none; }
.pf-sc-dots button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.pf-sc-dots i { display: block; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.35); transition: height .2s ease, background-color .2s ease; }
.pf-sc-dots button:hover i { background: rgba(255,255,255,.7); }
.pf-sc-dots button.on i { height: 18px; background: var(--pf-acc-b, var(--pf-acc, #fff)); }
.pf-sc-dots button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
.pf-sc-dots.pf-sc-dense button { height: 12px; }
.pf-sc-dots.pf-sc-dense button.on i { height: 10px; }

html.pf-px .pf-plate > .pf-banner .img-skeleton { translate: 0 var(--pf-py, 0px); }
html.pf-px .pf-pagebg > img, html.pf-px .pf-pagebg > video { translate: 0 var(--pf-pb, 0px); scale: 1.06; }

@media (prefers-reduced-motion: reduce) {
    .pf-sc-dots i { transition: none; }
}

.pfe-anim.pfe-sc-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pfe-hint-l.pfe-sc-hint { margin-bottom: 10px; }
