/* DOUX Magazine flipbook */
dialog.mag{width:min(96vw,1200px);max-height:96vh;padding:14px;border:1px solid #ffffff30;border-radius:18px;background:#0d0a26;color:#f7f3ff;overflow:auto}
dialog.mag::backdrop{background:#040310e6}
.mag-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mag-title{margin:0;font-family:VT323,monospace;font-size:1.4rem;letter-spacing:.1em;color:#fff1a6}
.mag-title span{font-family:"Space Grotesk",sans-serif;font-size:.9rem;letter-spacing:0;color:#d6cef0}
dialog.mag button{min-height:44px;padding:0 16px;border-radius:999px;border:0;background:#fff1a6;color:#1a1033;font:inherit;font-weight:700;cursor:pointer}
dialog.mag button:hover{background:#ffb3d9}
dialog.mag button:disabled{opacity:.35;cursor:default;background:#fff1a6}
.mag-book{position:relative;width:min(100%,calc(72vh * 1260 / 846));aspect-ratio:1260/846;margin:0 auto;perspective:4200px;cursor:pointer;border-radius:6px;box-shadow:0 30px 70px #000c}
.mag-book > div{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.mag-left{pointer-events:none}
.mag-left.keep-l{clip-path:inset(0 50% 0 0)}
.mag-left.keep-r{clip-path:inset(0 0 0 50%)}
.mag-left:not(.keep-l):not(.keep-r){display:none}
.mag-spine{left:calc(50% - 14px)!important;right:auto!important;width:28px;background:linear-gradient(90deg,transparent,#0000002e 45%,#00000040 50%,#0000002e 55%,transparent)!important;pointer-events:none}
.mag-leaf{transform-style:preserve-3d;pointer-events:none}
.mag-leaf[hidden]{display:none}
.mag-leaf.fwd{left:50%!important;transform-origin:0 50%}
.mag-leaf.bwd{right:50%!important;transform-origin:100% 50%}
.mag-front,.mag-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-size:200% 100%;background-repeat:no-repeat}
.fwd .mag-front{background-position:100% 0;box-shadow:inset 18px 0 30px -18px #0007}
.fwd .mag-back{background-position:0 0;transform:rotateY(180deg);box-shadow:inset -18px 0 30px -18px #0007}
.bwd .mag-front{background-position:0 0;box-shadow:inset -18px 0 30px -18px #0007}
.bwd .mag-back{background-position:100% 0;transform:rotateY(-180deg);box-shadow:inset 18px 0 30px -18px #0007}
.mag-leaf.fwd.go{animation:magfwd .75s cubic-bezier(.45,.05,.3,1) forwards}
.mag-leaf.bwd.go{animation:magbwd .75s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes magfwd{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes magbwd{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.mag-bar{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px;margin-top:12px}
.mag-nav{width:44px;height:44px;min-height:44px!important;padding:0!important;font-size:1.2rem!important;flex:none}
.mag-count{margin:0;min-width:0;text-align:center;color:#d6cef0;font-size:.95rem}
.mag-hint{margin:6px 0 0;text-align:center;font-family:VT323,monospace;font-size:1.05rem;letter-spacing:.06em;color:#b8afd8}
@media (max-width:640px){.mag-hint{display:none}.mag-count{font-size:.85rem}}
/* closed magazine: a single cover page, centered */
.mag-base.single{top:0;bottom:0;left:0!important;right:0!important;margin:0 auto;height:100%;width:auto;aspect-ratio:594/774;background-size:100% 100%!important;background-position:0 0!important;border-radius:3px;box-shadow:0 20px 50px #000a;transform-origin:0 50%}
.mag-base.single.l{transform-origin:100% 50%}
.mag-book.closed{box-shadow:none}
.mag-book.closed .mag-spine{display:none}
.mag-base.open-out{transition:transform .34s ease-in,opacity .34s;transform:rotateY(-70deg);opacity:.2}
.mag-base.open-in{transition:transform .34s ease-in,opacity .34s;transform:rotateY(70deg);opacity:.2}
.mag-base.open-in2{animation:magin .36s ease-out}
.mag-base.open-out2{animation:magin .36s ease-out}
@keyframes magin{from{opacity:.2;transform:scale(.96)}to{opacity:1;transform:none}}
.mag-close{white-space:nowrap;flex:none}
@media (max-width:640px){.mag-title{font-size:1.15rem}.mag-title span{display:block;font-size:.8rem}}