.mag-reader{background:linear-gradient(#0d1b2a 0%,#16283c 100%);padding:1rem 1rem 1.6rem}.mag-reader:fullscreen{flex-direction:column;padding-top:.6rem;display:flex}.mag-reader:fullscreen .mag-stage{flex:1}.mag-sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.mag-bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;max-width:1180px;margin:0 auto .9rem;display:grid}.mag-bar-r{flex-wrap:wrap;justify-content:flex-end;gap:.4rem;display:flex}.mag-bar-c{align-items:center;gap:.7rem;display:flex}.mag-pos{color:#cfd8e3;text-align:center;min-width:11ch;font-size:.9rem;font-weight:600}.mag-btn{appearance:none;color:#eef2f7;font:inherit;cursor:pointer;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff38;border-radius:8px;align-items:center;gap:.35rem;padding:.46rem .7rem;font-size:.83rem;font-weight:600;line-height:1.2;text-decoration:none;display:inline-flex}.mag-btn:hover{background:#ffffff24}.mag-btn:disabled{opacity:.35;cursor:default}.mag-btn.gold{background:var(--gold);border-color:var(--gold);color:#1b1200}.mag-btn.round{border-radius:50%;justify-content:center;width:38px;height:38px;padding:0}.mag-btn svg,.mag-ico{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.mag-btn.round svg{width:20px;height:20px}.mag-bar select{color:#eef2f7;font:inherit;background:#ffffff0f;border:1px solid #ffffff38;border-radius:8px;max-width:100%;padding:.48rem .6rem;font-size:.86rem}.mag-bar select option{color:#10202f}.mag-stage{place-items:center;min-height:340px;display:grid;position:relative}.mag-book{--pw:420px;--ph:594px;width:calc(var(--pw) * 2);height:var(--ph);perspective:2600px;perspective-origin:50% 40%;touch-action:pan-y;transition:width .2s,height .2s;position:relative}.mag-reader[data-mode=single] .mag-book{width:var(--pw);overflow:hidden}.mag-edge{z-index:0;background:repeating-linear-gradient(90deg,#ffffffd9 0 1px,#8c96a080 1px 2px);border-radius:2px;height:97.6%;transition:width .3s;position:absolute;top:1.2%}.mag-edge.left{right:calc(50% + var(--pw) - 1px);box-shadow:-2px 3px 10px #00000073}.mag-edge.right{left:calc(50% + var(--pw) - 1px);box-shadow:2px 3px 10px #00000073}.mag-reader[data-mode=single] .mag-edge{display:none}.mag-leaf{width:var(--pw);height:var(--ph);transform-origin:0;transform-style:preserve-3d;will-change:transform;transition:transform .82s cubic-bezier(.28,.06,.2,1);position:absolute;top:0;left:50%}.mag-reader[data-mode=single] .mag-leaf{left:0}.mag-leaf.dragging{transition:none}@media (prefers-reduced-motion:reduce){.mag-leaf{transition:transform 1ms linear}}.mag-face{backface-visibility:hidden;background:#fff;position:absolute;inset:0;overflow:hidden;box-shadow:0 10px 30px #00000073}.mag-face.back{transform:rotateY(180deg)}.mag-face img{object-fit:contain;user-select:none;background:#fff;width:100%;height:100%;display:block}.mag-face.blank{background:#f4f1ea}.mag-face.front{border-radius:0 5px 5px 0}.mag-face.back{border-radius:5px 0 0 5px}.mag-reader[data-mode=single] .mag-face{border-radius:5px}.mag-shade{pointer-events:none;background:linear-gradient(90deg,#00000042,#0000000a 6%,#0000 14%),linear-gradient(90deg,#00000057,#0000 55%);position:absolute;inset:0}.mag-face.back .mag-shade{transform:scaleX(-1)}.mag-leaf.turning .mag-face:after{content:"";opacity:var(--shade,0);pointer-events:none;background:#0a1420;position:absolute;inset:0}.mag-leaf.turning:not(.dragging) .mag-face:after{animation:.82s cubic-bezier(.28,.06,.2,1) magSweep}@keyframes magSweep{0%,to{opacity:0}50%{opacity:.5}}.mag-spinner{z-index:60;border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;animation:.9s linear infinite magSpin;position:absolute;top:50%;left:50%}@keyframes magSpin{to{transform:rotate(360deg)}}.mag-arrow{z-index:70;color:#fff;cursor:pointer;backdrop-filter:blur(4px);background:#0a142099;border:1px solid #ffffff40;border-radius:50%;place-items:center;width:46px;height:46px;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.mag-arrow:hover{background:#0a1420d9}.mag-arrow svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.mag-arrow.prev{left:.2rem}.mag-arrow.next{right:.2rem}.mag-arrow[hidden]{display:none}.mag-hint{text-align:center;color:#ffffff80;margin:0;font-size:.8rem;transition:opacity .6s;position:absolute;bottom:-1.5rem;left:0;right:0}.mag-hint.gone{opacity:0}.mag-strip{background:#00000040;border-radius:10px;gap:.6rem;max-width:1180px;margin:1.6rem auto 0;padding:.7rem;display:flex;overflow-x:auto}.mag-strip[hidden]{display:none}.mag-strip button{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:4px;flex:none;padding:0;line-height:0;position:relative}.mag-strip img{border-radius:2px;width:58px;height:auto;display:block}.mag-strip span{color:#fff;background:#000000b3;border-radius:3px;padding:2px 4px;font-size:.68rem;line-height:1;position:absolute;bottom:2px;right:2px}.mag-strip button.on{border-color:var(--gold)}.mag-zoom{z-index:9999;background:#0a1420;flex-direction:column;display:flex;position:fixed;inset:0}.mag-zoom[hidden]{display:none}.mag-zbar{background:#00000073;border-bottom:1px solid #ffffff1a;flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:.8rem;padding:.6rem .8rem;display:flex}.mag-zctl{align-items:center;gap:.5rem;display:flex}.mag-zpage,.mag-zlevel{color:#cfd8e3;font-size:.86rem;font-weight:600}.mag-zlevel{text-align:center;min-width:4.5ch}.mag-zscroll{touch-action:none;overscroll-behavior:contain;cursor:default;flex:1;place-items:center;padding:12px;display:grid;position:relative;overflow:auto}.mag-zscroll.pannable{cursor:grab}.mag-zscroll.pannable:active{cursor:grabbing}.mag-zscroll img{user-select:none;background-color:#fff;background-position:50%;background-size:cover;max-width:none;height:auto;display:block;box-shadow:0 10px 40px #0009}.mag-zoom .mag-arrow.prev{left:.6rem}.mag-zoom .mag-arrow.next{right:.6rem}@media (width<=880px){.mag-bar{grid-template-columns:1fr;justify-items:center;gap:.6rem}.mag-bar-l,.mag-bar-r{justify-content:center;width:100%;display:flex}.mag-arrow{width:40px;height:40px}.mag-arrow.prev{left:-.4rem}.mag-arrow.next{right:-.4rem}.mag-zoom .mag-arrow.prev{left:.2rem}.mag-zoom .mag-arrow.next{right:.2rem}.mag-zbar{justify-content:center}}