.mx-read-ov{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,.28);display:flex;align-items:flex-start;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mx-read-ov[hidden]{display:none}
.mx-read-box{background:var(--panel,#efe6d0);color:var(--text,#2a2320);border:1px solid var(--border,#c9b892);border-radius:12px;width:95vw;max-width:95vw;height:calc(100% - .75rem);display:flex;flex-direction:column;box-shadow:0 12px 44px rgba(0,0,0,.55);overflow:hidden}
.mx-read-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border,#c9b892);flex-shrink:0}
.mx-read-head h3{margin:0;font-family:var(--font-display,serif);color:var(--accent,#7a3b2e);font-weight:normal;font-size:1.15rem}
.mx-read-x{background:none;border:none;font-size:1.3rem;cursor:pointer;color:inherit;opacity:.6;line-height:1}
.mx-read-tabs{display:flex;gap:6px;padding:8px 16px;flex-shrink:0;border-bottom:1px solid var(--border-dim,#ddd0b0)}
.mx-read-tabs button{flex:0 0 auto;padding:.4rem .8rem;border-radius:999px;border:1px solid var(--border,#c9b892);background:transparent;color:inherit;cursor:pointer;font-size:.85rem;opacity:.65}
.mx-read-tabs button.active{background:var(--accent,#7a3b2e);color:#fff;opacity:1;border-color:var(--accent,#7a3b2e)}
.mx-read-body{overflow-y:auto;flex:1;padding:14px 20px 20px}
.mx-book-group{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.6;margin:1.1rem 0 .4rem}
.mx-book-group:first-child{margin-top:0}
.mx-book{padding:.6rem 0;border-bottom:1px solid var(--border-dim,#ddd0b0)}
.mx-book:last-child{border-bottom:none}
.mx-book-title{font-family:var(--font-display,serif);font-weight:normal;font-size:1.05rem;color:var(--accent,#7a3b2e)}
.mx-book-meta{font-size:.74rem;opacity:.65;margin:.1rem 0 .3rem}
.mx-book-teaser{font-size:.9rem;line-height:1.55;margin:0}
.mx-tale{margin-bottom:1.6rem}
.mx-tale-img{width:100%;height:9rem;object-fit:cover;border-radius:8px;display:block;cursor:zoom-in;margin-bottom:.5rem}
.mx-tale-era{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.6}
.mx-tale-title{margin:.15rem 0 .5rem;font-family:var(--font-display,serif);font-weight:normal;font-size:1.25rem;color:var(--accent,#7a3b2e)}
.mx-tale-p{font-size:.92rem;line-height:1.65;margin:0 0 .8rem;max-width:64ch}
@media(max-width:520px){ .mx-tale-img{height:7rem} .mx-read-body{padding:12px 14px 16px} }