*,*::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){
  #bar{gap:2px}
  .tb{min-width:34px;padding:0 6px}
  #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}}

/* zoom overlay */
#zoom{position:fixed;inset:0;z-index:50;background:rgba(28,26,24,.94);display:flex;flex-direction:column}
#zoom[hidden]{display:none}
#zoombar{position:absolute;top:10px;right:10px;z-index:2;display:flex;gap:6px}
.zb{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#33312e;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.zb[disabled]{opacity:.4;cursor:default}
#zoomscroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain}
#zoomimgs{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 12px 24px;width:max-content;min-width:100%}
#zoomimgs.two{flex-direction:row;align-items:flex-start;justify-content:center}
#zoomimgs img{display:block;height:auto;max-width:none;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.4);user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}

/* clickable contents page (toc.js): invisible tap areas, highlight only on hover/press */
.toc-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.toc-hot{position:absolute;display:block;pointer-events:auto;border-radius:6px;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:background-color .12s}
@media (hover:hover){.toc-hot:hover{background:rgba(31,111,74,.10)}}
.toc-hot:active{background:rgba(31,111,74,.18)}
.toc-hot:focus{outline:none}
.toc-hot:focus-visible{outline:2px solid #6b8cff;outline-offset:-2px}
#toc svg{stroke-width:2}