.flipper{margin:auto;max-width:100em;min-height:20em;position:relative;width:90%}.flipper__track{aspect-ratio:var( --page-ar,.7071 ) /1;margin:auto;max-height:80vh;opacity:0;transition:opacity .3s;z-index:10}@media screen and (min-width:40em){.flipper__track{aspect-ratio:calc(var( --page-ar, .7071 )*2) /1}}.flipper__track{width:auto!important}.flipper__track.stf__parent{max-height:auto;opacity:1}.flipper__loader{animation:kitt 1s linear infinite alternate;background:linear-gradient(to right,var( --color-border ) 35%,var( --color-primary ) 35%,var( --color-primary ) 64%,var( --color-border ) 64%);background-position:50% 50%;background-size:150%;display:block;height:.3em;left:50%;position:absolute;top:50%;transform:translateX(-50%);width:10em;z-index:11}@keyframes kitt{0%{background-position:180% 0}to{background-position:-80% 0}}.flipper .page-canvas{width:auto}.flipper .page{background-color:#fff;cursor:grab}.flipper .page:is(.is-empty){background-color:var( --modular-bg,var( --body-bg ) )}.flipper .page:not(.is-first,.is-last,.is-empty):after{content:"";inset:0;pointer-events:none;position:absolute}.flipper .page.--left:after{box-shadow:inset -7px 0 30px -10px #0006}.flipper .page.--right:after{box-shadow:inset 7px 0 30px -10px #0006}.flipper__fins{margin:var( --gap ) auto 0}.flipper__fins,.flipper__pointer{display:flex;justify-content:center}.flipper__pointer{align-items:center;border:.1ex solid var( --color-secondary );gap:.5ch;width:5em}@media screen and (min-width:40em){.flipper{max-width:90vw}}