*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:#eceae6;overflow:hidden}
body{font:14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#33312e;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 40%,#f6f5f2 0%,#e6e3de 100%)}
#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 56px 8px}
#bookbox{position:relative;transition:transform .6s cubic-bezier(.3,.7,.3,1);will-change:transform}
#book{margin:0 auto;opacity:0;transition:opacity .3s}
#book.ready{opacity:1}
.page{background:#fff;overflow:hidden}
.page img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;pointer-events:none;background:#f3f1ed}
.stf__parent{min-width:0!important;min-height:0!important}
.stf__block{filter:drop-shadow(0 10px 22px rgba(40,34,26,.18)) drop-shadow(0 2px 4px rgba(40,34,26,.12))}
.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(0,0,0,.15);cursor:pointer;display:grid;place-items:center;color:#33312e;transition:opacity .2s,background .2s}
.nav:hover{background:#fff}
.nav-prev{left:8px}.nav-next{right:8px}
.nav[disabled],.tb[disabled]{opacity:.3;cursor:default}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#bar{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px calc(10px + env(safe-area-inset-bottom))}
.tb{height:36px;min-width:36px;padding:0 8px;border:0;border-radius:18px;background:transparent;color:#33312e;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font:inherit}
.tb:hover{background:rgba(0,0,0,.06)}
.dl{background:#33312e;color:#fff;padding:0 14px 0 12px}
.dl:hover{background:#1f1d1b}
#counter{min-width:72px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sep{width:1px;height:20px;background:rgba(0,0,0,.12);margin:0 4px}
.fs-off{display:none}
.is-fs .fs-on{display:none}.is-fs .fs-off{display:inline}
button:focus-visible,a:focus-visible{outline:2px solid #6b8cff;outline-offset:2px}
@media (max-width:600px){
  #stage{padding:10px 10px 4px}
  .nav{display:none}
  .dl span{display:none}
  .dl{padding:0 10px}
}
@media (max-height:420px){#bar{padding-top:2px;padding-bottom:4px}#stage{padding-top:6px}}

/* welcome sound toggle */
#snd .snd-body{fill:currentColor;stroke-width:1.6}
#snd .snd-off{display:none}
#snd.muted .snd-on{display:none}#snd.muted .snd-off{display:inline}
#snd.playing{color:#1f6f4a}
#snd.playing .snd-on{animation:sndpulse 1s ease-in-out infinite}
@keyframes sndpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){#snd.playing .snd-on{animation:none}}