.eir, .eir * { box-sizing: border-box; }
.eir { --eir-ink:#11132b; --eir-gold:#ffd569; --eir-paper:#f9f6eb; position:fixed; z-index:999999; inset:0; width:100vw; height:100dvh; min-height:100svh; margin:0; overflow:hidden; background:#12132a; color:#fff; font-family:ui-rounded,"Avenir Next",system-ui,sans-serif; isolation:isolate; }
.eir button, .eir a { font:inherit; -webkit-tap-highlight-color:transparent; }
.eir button { cursor:pointer; }
.eir button:focus-visible, .eir a:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.eir__header { position:absolute; z-index:5; inset:0 0 auto; display:grid; grid-template-columns:1fr minmax(150px,380px) 1fr; align-items:center; gap:10px; padding:max(16px,env(safe-area-inset-top)) clamp(16px,4vw,58px) 18px; background:linear-gradient(180deg,rgba(8,9,30,.78),transparent); pointer-events:none; }
.eir__header > * { pointer-events:auto; }
.eir__brand { display:inline-flex; align-items:center; gap:8px; min-width:0; color:#fff; font-family:Georgia,serif; font-size:1rem; font-weight:bold; letter-spacing:-.04em; text-decoration:none; }
.eir__brand i { display:grid; width:29px; height:29px; place-items:center; border-radius:50%; color:#2d1747; background:var(--eir-gold); font-family:ui-rounded,"Avenir Next",system-ui,sans-serif; font-size:.9rem; font-style:normal; }
.eir__title { overflow:hidden; margin:0; color:#fff; font-size:.78rem; font-weight:900; letter-spacing:.02em; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.eir__actions { display:flex; justify-self:end; gap:7px; } .eir__motion, .eir__fullscreen { border:1px solid rgba(255,255,255,.58); border-radius:999px; padding:8px 12px; background:rgba(10,11,34,.38); color:#fff; font-size:.72rem; font-weight:850; }
.eir__motion[aria-pressed="true"] { background:#fff; color:var(--eir-ink); }
.eir__stage { position:relative; display:grid; min-height:100dvh; place-items:center; padding:max(76px,calc(env(safe-area-inset-top) + 58px)) max(12px,4vw) max(94px,calc(env(safe-area-inset-bottom) + 62px)); outline:0; isolation:isolate; }
.eir__stage::before { position:absolute; z-index:-1; inset:clamp(15px,4vw,58px); border:1px solid rgba(255,223,132,.36); border-radius:clamp(20px,4vw,42px); background:radial-gradient(ellipse at 50% 49%,rgba(113,79,180,.37),rgba(18,15,50,.15) 53%,transparent 72%); box-shadow:inset 0 0 42px rgba(255,218,111,.08),0 0 44px rgba(122,81,198,.18); content:""; }
.eir__stage::after { position:absolute; z-index:-1; inset:clamp(24px,5vw,74px); border:1px solid rgba(255,255,255,.09); border-radius:clamp(16px,3vw,32px); content:""; }
/* Every current book spread is 16:9. Give it the largest possible 16:9 frame,
   instead of relying on WordPress/theme image sizing rules. */
.eir__page { display:block; width:min(94vw,calc((100dvh - 170px) * 1.7778)); max-width:100%; max-height:calc(100dvh - 170px); height:auto; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.48); opacity:1; transform:scale(1); transition:opacity .28s ease,transform .58s cubic-bezier(.2,.8,.2,1); will-change:transform,opacity; }
.eir.is-changing .eir__page { opacity:.15; transform:scale(.975) rotate(.4deg); }
.eir__wash { position:absolute; z-index:-1; inset:-12%; background:radial-gradient(circle at 50% 35%,#5f4e9f 0,transparent 34%),radial-gradient(circle at 20% 70%,rgba(24,182,200,.3),transparent 26%),linear-gradient(145deg,#131630,#35295e 52%,#8d4f8d); animation:eir-atmosphere 14s ease-in-out infinite alternate; }
.eir__footer { position:absolute; z-index:5; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:18px clamp(16px,4vw,58px); background:linear-gradient(0deg,rgba(8,9,30,.76),transparent); }
.eir__nav { display:inline-flex; align-items:center; justify-content:center; gap:8px; justify-self:start; min-height:44px; border:1px solid rgba(255,255,255,.42); border-radius:999px; padding:0 17px; background:rgba(11,11,34,.42); color:#fff; font-size:.83rem; font-weight:900; }
.eir__nav:last-child { justify-self:end; }
.eir__nav:disabled { cursor:not-allowed; opacity:.35; }
.eir__progress { display:flex; align-items:center; gap:9px; color:#fff; font-size:.78rem; font-weight:900; letter-spacing:.08em; }
.eir__progress i { display:block; width:min(24vw,210px); height:3px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.3); }
.eir__progress i::after { display:block; width:var(--eir-progress,2.44%); height:100%; background:var(--eir-gold); box-shadow:0 0 12px var(--eir-gold); content:""; transition:width .3s ease; }
.eir__hint { position:absolute; z-index:4; bottom:12px; left:50%; margin:0; color:rgba(255,255,255,.73); font-size:.67rem; transform:translateX(-50%); white-space:nowrap; }
.eir__install { position:absolute; z-index:12; inset:0; display:grid; place-items:center; padding:24px; background:rgba(8,8,29,.72); backdrop-filter:blur(11px); }
.eir__install[hidden] { display:none; }
.eir__install-card { position:relative; width:min(100%,390px); border:1px solid rgba(255,220,122,.58); border-radius:24px; padding:28px; background:linear-gradient(145deg,#30235d,#171331); color:#fff; box-shadow:0 24px 70px rgba(0,0,0,.54),0 0 44px rgba(255,211,97,.17); text-align:center; }
.eir__install-card > span { display:block; color:var(--eir-gold); font-size:2rem; text-shadow:0 0 22px rgba(255,229,147,.8); }
.eir__install-card strong { display:block; margin-top:7px; font-family:Georgia,serif; font-size:1.25rem; }
.eir__install-card p { margin:13px 0 19px; color:rgba(255,255,255,.82); font-size:.86rem; line-height:1.5; }
.eir__install-card button:not(.eir__install-close) { border:0; border-radius:999px; padding:10px 17px; background:var(--eir-gold); color:#2d1747; font-weight:900; }
.eir__install-close { position:absolute; top:8px; right:12px; border:0; background:transparent; color:#fff; font-size:1.6rem; }
.eir__magic { position:absolute; z-index:4; top:50%; left:50%; border:0; border-radius:999px; padding:13px 18px; background:var(--eir-gold); color:#2c2149; box-shadow:0 8px 24px rgba(255,213,105,.38); font-size:.82rem; font-weight:950; transform:translate(-50%,-50%); }
.eir__sparkles { position:absolute; z-index:3; inset:0; pointer-events:none; overflow:hidden; }
.eir__sparkles b { position:absolute; color:var(--eir-gold); font-size:clamp(18px,3vw,34px); opacity:0; text-shadow:0 0 16px #fff3b1; animation:eir-sparkle .9s ease-out forwards; }
.eir.reduce-motion *, .eir.reduce-motion *::before, .eir.reduce-motion *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
@keyframes eir-atmosphere { from { transform:scale(1) translate3d(-1%,-1%,0); filter:saturate(1); } to { transform:scale(1.08) translate3d(2%,1%,0); filter:saturate(1.16); } }
@keyframes eir-sparkle { 0% { opacity:0; transform:scale(.2) rotate(0); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--eir-x),var(--eir-y)) scale(1.8) rotate(180deg); } }
@media (max-width:640px) { .eir__header { grid-template-columns:1fr auto; padding:max(13px,env(safe-area-inset-top)) 14px 12px; } .eir__brand span, .eir__title { display:none; } .eir__actions { gap:5px; } .eir__motion, .eir__fullscreen { padding:7px 9px; font-size:.62rem; } .eir__stage { padding:max(59px,calc(env(safe-area-inset-top) + 47px)) 7px max(88px,calc(env(safe-area-inset-bottom) + 58px)); } .eir__stage::before { inset:7px; border-radius:19px; } .eir__stage::after { inset:14px; border-radius:15px; } .eir__page { width:min(96vw,calc((100dvh - 142px) * 1.7778)); max-height:calc(100dvh - 142px); } .eir__footer { padding:10px 14px max(25px,calc(env(safe-area-inset-bottom) + 10px)); } .eir__nav { min-height:40px; padding:0 12px; font-size:.75rem; } .eir__progress i { width:18vw; } .eir__hint { bottom:6px; font-size:.59rem; } }
@media (orientation:landscape) and (max-height:620px) { .eir__header { padding-top:max(9px,env(safe-area-inset-top)); padding-bottom:8px; } .eir__footer { padding-top:8px; padding-bottom:max(10px,env(safe-area-inset-bottom)); } .eir__hint { display:none; } .eir__page { width:min(95vw,calc((100dvh - 122px) * 1.7778)); max-height:calc(100dvh - 122px); } }