.page-numbers-stage{min-height:300px;padding:14px}
.page-numbers-stage canvas{box-shadow:0 2px 10px rgba(0,0,0,.18);background:#fff}
.page-numbers-pos{position:relative;width:96px;height:124px;border:2px solid #d6dae4;border-radius:8px;background:#fff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;padding:4px;gap:0 4px}
.page-numbers-pos::before{content:"";position:absolute;left:18px;right:18px;top:36px;bottom:36px;background:repeating-linear-gradient(#eef0f5 0 4px,transparent 4px 10px);pointer-events:none}
.page-numbers-pos button{border:0;background:transparent;cursor:pointer;display:grid;padding:0;border-radius:5px;justify-items:center}
.page-numbers-pos button i{display:block;width:16px;height:10px;border-radius:3px;background:#cfd5e2}
.page-numbers-pos .pos-tl,.page-numbers-pos .pos-tc,.page-numbers-pos .pos-tr{align-items:start}
.page-numbers-pos .pos-bl,.page-numbers-pos .pos-bc,.page-numbers-pos .pos-br{align-items:end}
.page-numbers-pos button:hover{background:var(--soft)}
.page-numbers-pos button.on i{background:var(--acc)}
.page-numbers-pos button:focus-visible{outline:2px solid var(--acc)}
#app [hidden]{display:none!important}
@media(max-width:860px){.page-numbers-stage{min-height:0}.page-numbers-stage canvas{width:auto!important;max-height:48vh}}