*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;background:#000;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;overflow:hidden;}

#app{position:fixed;inset:0;background:#000;}

.stage{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}

.stage-inner{position:relative;width:100%;}

.page-img{display:block;width:100%;height:auto;}
.page-img.pass{pointer-events:none;}

.hs{position:absolute;z-index:10;cursor:pointer;background:transparent;}
.hs.debug{outline:2px dashed #FABB00;background:rgba(250,187,0,.15);}

.btn-back{
  position:fixed;top:14px;left:12px;z-index:50;
  background:none;border:none;padding:0;cursor:pointer;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
  transition:transform .15s;
}
.btn-back:active{transform:scale(.9);}
@supports(top:env(safe-area-inset-top)){
  .btn-back{top:calc(14px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));}
}

.glass-tip{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:40;
  color:#fff;font-size:13px;padding:6px 16px;border-radius:20px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  pointer-events:none;
}

.scroll-hint{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:45;
  color:#fff;font-size:12px;padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(10px);pointer-events:none;
  display:none;animation:float 1s ease-in-out infinite alternate;
}
.scroll-hint.show{display:block;}
@keyframes float{
  from{transform:translate(-50%,0);opacity:.6}
  to{transform:translate(-50%,-8px);opacity:1}
}
@media(prefers-reduced-motion:reduce){.scroll-hint{animation:none;}}