/* Update 2026-10-10: HTML method loop (replaces clipped SVG), Why-MNEOS media fallbacks, misc fixes */
.m4-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; counter-reset: loop; position: relative; }
.m4-loop li { position: relative; background: #171A20; border: 1px solid #313842; border-radius: 6px; padding: 12px 12px 12px 14px; min-width: 0; }
.m4-loop li strong { display: block; font-size: 14px; font-weight: 600; color: #F3EFE7; line-height: 1.3; }
.m4-loop li span { display: block; font-size: 12.5px; color: #C4BDAE; line-height: 1.4; margin-top: 3px; }
.m4-loop li::before { counter-increment: loop; content: counter(loop, decimal-leading-zero); position: absolute; top: -9px; left: 10px; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 1px; color: #8C96A4; background: #12151A; padding: 0 5px; }
.m4-loop li::after { content: ""; position: absolute; z-index: 2; top: 50%; right: -22px; width: 14px; height: 14px; margin-top: -7px; border-top: 1.5px solid #8C96A4; border-right: 1.5px solid #8C96A4; transform: rotate(45deg); }
.m4-loop li:nth-child(3)::after { right: auto; left: 50%; top: auto; bottom: -21px; margin-left: -7px; transform: rotate(135deg); }
.m4-loop li:nth-child(4)::after { right: auto; left: -22px; transform: rotate(225deg); }
.m4-loop li:nth-child(5)::after { right: auto; left: 50%; top: -21px; margin-left: -7px; transform: rotate(-45deg); }
.m4-loop li:nth-child(1) { border-color: #4A7DFF; }
.m4-loop li:nth-child(4) { border-color: #B9724A; grid-column: 2 / span 2; }
.m4-loop li:nth-child(5) { border-color: #6FCF97; grid-column: 1; grid-row: 2; }
.m4-loop li:nth-child(4) { grid-row: 2; }
.m4-loop-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: #8C96A4; text-align: center; }
@media (max-width: 560px) {
  .m4-loop { grid-template-columns: 1fr; gap: 22px; }
  .m4-loop li, .m4-loop li:nth-child(4), .m4-loop li:nth-child(5) { grid-column: auto; grid-row: auto; }
  .m4-loop li::after, .m4-loop li:nth-child(3)::after, .m4-loop li:nth-child(4)::after { right: auto; left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -7px; transform: rotate(135deg); }
  .m4-loop li:nth-child(5)::after { display: none; }
  .m4-loop li strong { font-size: 15px; }
  .m4-loop li span { font-size: 13.5px; }
}
/* External public-site link treatment */
.m4-ext::after { content: " \2197"; font-size: 0.85em; }
/* Why MNEOS: narration audio restored 2026-10-10 from the August 3 deployment */
/* Why MNEOS: portrait fallback when an image is unavailable */
.wm-muse-portrait-wrap { position: relative; }
.wm-muse-portrait.is-missing { visibility: hidden; }
.wm-muse-portrait-wrap.is-missing { background: radial-gradient(120% 90% at 50% 20%, #2B2F3A 0%, #171A20 60%, #0E1013 100%); }
.wm-muse-portrait-wrap.is-missing::before { content: attr(data-initial); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', serif; font-size: 72px; font-weight: 500; color: rgba(209,169,97,0.75); letter-spacing: 0.04em; }
.wm-muse-portrait-wrap.is-missing::after { content: attr(data-sub); position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--font-mono, monospace); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: #8C96A4; }
.wm-modal-portrait.is-missing { display: none; }
/* Why MNEOS: keep the Story/Scholar toggle clear of headings on small screens */
@media (max-width: 700px) { .wm-mode-toggle { top: auto !important; bottom: 18px !important; right: 14px !important; } }