/* Discord look-alikes of the classic landing, v2 (landing-mock.js, landing-scenes.js). Everything is .mx-*. */
.mx-win { --bg: #313338; --side: #2b2d31; --text: #dbdee1; --muted: #949ba4; --line: #3f4147; --mx-h: 520px;
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; height: var(--mx-h); overflow: hidden; isolation: isolate;
    background: var(--bg); color: var(--text); border: 1px solid #1f1f22; border-radius: 12px; font-family: "gg sans", "Noto Sans", "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.35;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.mx-win.has-side { grid-template-columns: 188px minmax(0, 1fr); }
.mx-win * { box-sizing: border-box; }
.mx-win img { max-width: 100%; }
.mx-win .hash { color: #80848e; font-size: 20px; font-weight: 400; line-height: 1; margin-right: 6px; }
.mx-side { background: var(--side); display: flex; flex-direction: column; min-width: 0; padding: 0 8px; overflow: hidden; }
.mx-guild { display: flex; align-items: center; justify-content: space-between; height: 48px; margin: 0 -8px 8px; padding: 0 16px; border-bottom: 1px solid #1f2023; font-weight: 700; color: #f2f3f5; font-size: 14.5px; }
.mx-guild i { font-style: normal; color: #b5bac1; }
.mx-chs { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.mx-cat { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; margin: 14px 0 4px 6px; text-transform: uppercase; }
.mx-ch { display: flex; align-items: center; padding: 5px 8px; border-radius: 4px; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden; max-height: 40px; transition: background 0.2s, opacity 0.4s, transform 0.4s, max-height 0.4s, color 0.2s; }
.mx-ch .nm { overflow: hidden; text-overflow: ellipsis; }
.mx-ch.voice .hash { font-size: 13px; margin-right: 8px; filter: grayscale(1) brightness(1.6); }
.mx-ch.active { background: #404249; color: #fff; }
.mx-ch.new { animation: mx-pop 0.45s ease-out; }
.mx-ch.dying { opacity: 0; transform: translateX(-14px); max-height: 0; padding-block: 0; background: rgba(218, 55, 60, 0.18); color: #fca5a5; }
.mx-ch.tick .nm { animation: mx-tick 0.7s ease-out; }
.mx-ch .lim { margin-left: auto; padding-left: 6px; color: var(--muted); font-size: 12px; }
.mx-vu { display: flex; align-items: center; gap: 8px; padding: 2px 8px 2px 30px; color: var(--muted); font-size: 13.5px; animation: mx-pop 0.4s ease-out; white-space: nowrap; }
.mx-vu img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.mx-vu.talk img { box-shadow: 0 0 0 2px #23a55a; }
.mx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 4px; }
.mx-eq i { width: 3px; background: #23a55a; border-radius: 1px; animation: mx-eq 0.9s ease-in-out infinite; }
.mx-eq i:nth-child(2) { animation-delay: -0.3s; } .mx-eq i:nth-child(3) { animation-delay: -0.6s; } .mx-eq i:nth-child(4) { animation-delay: -0.15s; }
.mx-win.paused .mx-eq i, .mx-win.paused .mx-live-dot, .mx-win.paused .mx-typing .dots i { animation-play-state: paused; }
.mx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.mx-top { display: flex; align-items: center; gap: 2px; flex: none; height: 48px; padding: 0 16px; border-bottom: 1px solid #26272b; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
.mx-top b { color: #f2f3f5; font-size: 15px; white-space: nowrap; }
.mx-top i { width: 1px; height: 22px; background: var(--line); margin: 0 12px; }
.mx-topic { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mx-top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; padding-left: 10px; white-space: nowrap; }
.mx-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px 0 6px; overflow: hidden; transition: opacity 0.3s; }
.mx-msgs.fade { opacity: 0; }
.mx-typing { flex: none; height: 22px; padding: 0 16px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #dbdee1; opacity: 0; transition: opacity 0.2s; }
.mx-typing.on { opacity: 1; }
.mx-typing .dots { display: inline-flex; gap: 3px; }
.mx-typing .dots i { width: 6px; height: 6px; border-radius: 50%; background: #b5bac1; animation: mx-dot 1s ease-in-out infinite; }
.mx-typing .dots i:nth-child(2) { animation-delay: 0.15s; } .mx-typing .dots i:nth-child(3) { animation-delay: 0.3s; }
.mx-input { flex: none; margin: 0 16px 14px; background: #383a40; border-radius: 8px; padding: 10px 14px; color: #6d6f78; font-size: 14.5px; display: flex; align-items: center; gap: 12px; white-space: nowrap; overflow: hidden; }
.mx-input .plus { width: 22px; height: 22px; border-radius: 50%; background: #b5bac1; color: #383a40; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; }

/* messages */
.mx-msg { display: flex; gap: 14px; padding: 3px 16px; margin-top: 12px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease; min-width: 0; }
.mx-msg.show { opacity: 1; transform: none; }
.mx-msg.gone, .mx-sys.gone { opacity: 0; max-height: 0 !important; margin-top: 0; padding-block: 0; overflow: hidden; }
.mx-msg.eph { background: rgba(88, 101, 242, 0.07); }
.mx-msg.eph .mx-head time { color: #00a8fc; }
.mx-ava { width: 40px; height: 40px; border-radius: 50%; flex: none; margin-top: 2px; object-fit: cover; }
.mx-body { min-width: 0; flex: 1; }
.mx-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mx-name { font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 5px; }
.mx-tag { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px; line-height: 15px; }
.mx-head time { color: var(--muted); font-size: 12px; }
.mx-ref { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.mx-ref img { width: 16px; height: 16px; border-radius: 50%; }
.mx-ref b { font-weight: 600; color: #c4c9ce; }
.mx-ref span { overflow: hidden; text-overflow: ellipsis; }
.mx-text { color: var(--text); overflow-wrap: anywhere; margin-top: 1px; }
.mx-slash { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); padding: 3px 16px 0 16px; margin-top: 12px; opacity: 0; transition: opacity 0.4s; }
.mx-slash.show { opacity: 1; }
.mx-slash img { width: 16px; height: 16px; border-radius: 50%; }
.mx-slash b { color: #c9cdfb; font-weight: 600; }
.mx-cmd { color: #c9cdfb; background: rgba(88, 101, 242, 0.3); border-radius: 3px; padding: 0 4px; font-weight: 500; }
.mx-sys { display: flex; align-items: center; gap: 4px; padding: 4px 16px 4px 30px; color: var(--muted); font-size: 14px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s, max-height 0.4s; }
.mx-sys.show { opacity: 1; transform: none; }
.mx-sys .arrow { color: #23a55a; font-weight: 700; margin-right: 10px; }
.mx-sys .arrow.red { color: #f23f43; }
.mx-sys b { color: #f2f3f5; font-weight: 600; }

/* markdown */
.mx-men { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.mx-men.role { background: rgba(240, 178, 50, 0.18); color: #f0b232; }
.mx-code { background: #1e1f22; border-radius: 4px; padding: 1px 5px; font-family: Consolas, "Courier New", monospace; font-size: 85%; }
.mx-ts { background: #3f4147; border-radius: 3px; padding: 0 3px; }
.mx-link { color: #00a8fc; }
.mx-h2 { font-size: 20px; font-weight: 700; color: #f2f3f5; line-height: 1.25; margin: 2px 0; }
.mx-h3 { font-size: 16.5px; font-weight: 700; color: #f2f3f5; margin: 2px 0; }
.mx-sub { font-size: 12.5px; color: var(--muted); }
.mx-gap { height: 6px; }
.mx-quote { border-left: 4px solid #4e5058; padding-left: 10px; margin: 1px 0; border-radius: 2px; }

/* embed */
.mx-emb { position: relative; margin-top: 5px; max-width: 520px; background: #2b2d31; border-left: 4px solid #8b5cf6; border-radius: 4px; padding: 8px 16px 12px 12px; display: grid; gap: 6px; font-size: 14px; }
.mx-emb.has-thumb { padding-right: 104px; }
.mx-emb-thumb { position: absolute; top: 10px; right: 12px; width: 80px; height: 80px; border-radius: 6px; object-fit: cover; }
.mx-emb-author { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #f2f3f5; }
.mx-emb-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.mx-emb-title { font-weight: 700; color: #f2f3f5; font-size: 15.5px; }
.mx-emb-title.link { color: #00a8fc; }
.mx-emb-desc { color: var(--text); overflow-wrap: anywhere; }
.mx-emb-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px 14px; }
.mx-emb-field { min-width: 0; }
.mx-emb-fname { font-weight: 700; font-size: 13.5px; color: #f2f3f5; margin-bottom: 1px; overflow-wrap: anywhere; }
.mx-emb-fval { overflow-wrap: anywhere; }
.mx-emb-image { width: 100%; border-radius: 6px; margin-top: 2px; display: block; }
.mx-emb-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.mx-emb-foot img { width: 20px; height: 20px; border-radius: 50%; }
.mx-pic { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 4px; }
.mx-body > .mx-pic { max-width: 480px; }

/* components */
.mx-btns { display: grid; gap: 8px; margin-top: 8px; max-width: 520px; }
.mx-btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mx-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; background: #4e5058; white-space: nowrap; transition: filter 0.15s, transform 0.15s; }
.mx-btn.p { background: #5865f2; } .mx-btn.g { background: #248046; } .mx-btn.d { background: #da373c; }
.mx-btn.off { opacity: 0.45; }
.mx-btn.pressed { filter: brightness(0.8); transform: translateY(1px); }
.mx-btn .emo { font-size: 15px; line-height: 1; }
.mx-btn .ext { font-style: normal; font-size: 12px; opacity: 0.85; }
.mx-select { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; max-width: 520px; height: 40px; padding: 0 12px; background: #1e1f22; border: 1px solid #1e1f22; border-radius: 6px; color: #b5bac1; font-size: 14px; }
.mx-select i { font-style: normal; font-size: 18px; }
.mx-cont { margin-top: 5px; max-width: 520px; background: #2b2d31; border: 1px solid #3a3c42; border-left: 4px solid #8c78ff; border-radius: 8px; padding: 12px 14px; display: grid; gap: 8px; }
.mx-cont .mx-pic { margin-top: 0; }
.mx-cont .mx-btns { margin-top: 0; }
.mx-sepline { height: 1px; background: #3f4147; }

/* modal, floating things, cursor */
.mx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; border-radius: inherit; }
.mx-modal-wrap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0); transition: background 0.25s; padding: 12px; }
.mx-modal-wrap.show { background: rgba(0, 0, 0, 0.62); }
.mx-modal { width: 100%; max-width: 420px; background: #313338; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transform: scale(0.94); opacity: 0; transition: transform 0.25s, opacity 0.25s; }
.mx-modal-wrap.show .mx-modal { transform: none; opacity: 1; }
.mx-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; }
.mx-modal-head b { color: #f2f3f5; font-size: 18px; }
.mx-modal-head span { color: #b5bac1; }
.mx-modal-body { padding: 8px 16px 16px; display: grid; gap: 14px; }
.mx-modal-body label { display: grid; gap: 8px; }
.mx-modal-body label > span { color: #b5bac1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.mx-textarea { min-height: 40px; background: #1e1f22; border-radius: 3px; padding: 9px 10px; color: #dbdee1; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.mx-textarea:empty::after { content: "|"; color: #949ba4; animation: mx-caret 1s steps(1) infinite; }
.mx-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 14px 16px; background: #2b2d31; color: #fff; font-size: 14px; }
.mx-float { position: absolute; right: 14px; bottom: 14px; width: min(340px, calc(100% - 28px)); background: #111214; border: 1px solid #2b2d31; border-radius: 12px; padding: 12px 14px; opacity: 0; transform: translateY(14px); transition: opacity 0.35s, transform 0.35s; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); }
.mx-float.show { opacity: 1; transform: none; }
.mx-float .mx-text, .mx-float .mx-msg { margin: 0; }
.mx-cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 20px; height: 22px; opacity: 0; pointer-events: none; transform: translate(40px, 40px); transition: transform 0.75s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.mx-cursor.on { opacity: 1; }
.mx-cursor i { position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 89%, 37% 55%, 66% 55%); transition: transform 0.12s; }
.mx-cursor.down i { transform: scale(0.82); }

/* a few scene pieces */
.mx-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); animation: mx-live 1.6s ease-out infinite; vertical-align: middle; margin-right: 6px; }
.mx-react { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 1px 8px; background: rgba(88, 101, 242, 0.18); border: 1px solid #5865f2; border-radius: 8px; font-size: 14px; }
.mx-react b { font-size: 13px; color: #c9cdfb; }
.mx-react.pop { animation: mx-pop 0.3s ease-out; }
.mx-strike .mx-text { text-decoration: line-through; opacity: 0.55; transition: opacity 0.3s; }
.mx-flash { animation: mx-flash 0.5s ease-out; }
.mx-statline { transition: color 0.4s; }
.mx-note { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border: 1px solid #262626; border-radius: 14px; background: #0a0a0a; color: #cfcfcf; font-size: 14px; line-height: 1.5; }
.mx-note b { color: #fff; }
.mx-note .orb { flex: none; width: 34px; height: 34px; }
.mx-ocr-note { margin-top: 10px; }

@keyframes mx-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes mx-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes mx-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@keyframes mx-caret { 50% { opacity: 0; } }
@keyframes mx-tick { 0% { color: #fff; background: rgba(255, 255, 255, 0.14); } 100% { background: transparent; } }
@keyframes mx-live { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } }
@keyframes mx-flash { from { filter: brightness(1.6); } to { filter: none; } }

@media (prefers-reduced-motion: reduce) {
    .mx-msg, .mx-sys, .mx-float, .mx-slash { transition: none; }
    .mx-eq i, .mx-live-dot, .mx-typing .dots i { animation: none; }
}

/* the layout of the rows (the old .l-row rules in landing.css stay, these only fix the demo column) */
.l-row-demo { min-width: 0; }
.l-row-demo .mx-win { margin-inline: auto; }
@media (max-width: 1000px) { .mx-win.has-side { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 700px) {
    .mx-win { font-size: 13.5px; border-radius: 10px; }
    .mx-win.has-side { grid-template-columns: 96px minmax(0, 1fr); }
    .mx-side { padding: 0 4px; }
    .mx-guild { padding: 0 8px; font-size: 11.5px; height: 44px; margin: 0 -4px 6px; }
    .mx-guild i { display: none; }
    .mx-ch { font-size: 12px; padding: 4px 4px; }
    .mx-ch .hash { margin-right: 3px; font-size: 14px; }
    .mx-cat { font-size: 9.5px; margin: 10px 0 2px 2px; }
    .mx-vu { padding-left: 14px; font-size: 11.5px; gap: 5px; }
    .mx-vu img { width: 16px; height: 16px; }
    .mx-top { height: 42px; padding: 0 10px; }
    .mx-topic { display: none; }
    .mx-top i { display: none; }
    .mx-msg { gap: 9px; padding: 3px 10px; }
    .mx-ava { width: 32px; height: 32px; }
    .mx-emb { padding: 8px 10px 10px 10px; font-size: 13px; }
    .mx-emb.has-thumb { padding-right: 70px; }
    .mx-emb-thumb { width: 52px; height: 52px; right: 8px; }
    .mx-emb-fields { gap: 6px 10px; }
    .mx-input { margin: 0 10px 10px; padding: 8px 10px; font-size: 13px; }
    .mx-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
    .mx-h2 { font-size: 17px; }
    .mx-slash, .mx-sys { padding-left: 10px; }
}

.mx-spoil { background: #1e1f22; color: transparent; border-radius: 3px; user-select: none; }
.mx-orb { display: inline-grid; place-items: center; width: 26px; height: 26px; }
.mx-orb-t { color: #b5bac1; font-size: 12.5px; }
/* monitor: member list of the bots */
.mx-win.has-members { grid-template-columns: minmax(0, 1fr) 200px; }
.mx-members { background: var(--side); padding: 14px 8px; display: grid; gap: 3px; align-content: start; border-left: 1px solid #1f2023; min-width: 0; }
.mx-m-cat { color: var(--muted); font-size: 11.5px; font-weight: 700; margin: 0 6px 6px; }
.mx-member { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; min-width: 0; }
.mx-m-ava { position: relative; flex: none; }
.mx-m-ava img { width: 32px; height: 32px; border-radius: 50%; display: block; object-fit: cover; background: #111; }
.mx-m-ava i { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: #23a55a; border: 3px solid var(--side); box-sizing: content-box; }
.mx-m-t { min-width: 0; }
.mx-m-t b { display: flex; align-items: center; gap: 5px; color: #f2f3f5; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; }
.mx-m-t small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .mx-win.has-members { grid-template-columns: minmax(0, 1fr) 118px; } .mx-m-ava img { width: 24px; height: 24px; } .mx-m-t b { font-size: 11.5px; } .mx-m-t small { font-size: 10px; } .mx-member { gap: 6px; padding: 4px 2px; } .mx-tag { display: none; } .mx-emb-field { grid-column: span 6 !important; } }

.mx-body .mx-slash { padding: 0; margin: 0 0 3px; opacity: 1; }
.mx-flag { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background: linear-gradient(#fff 33%, #1c57a5 33% 66%, #d52b1e 66%); vertical-align: -1px; }
.mx-menu { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 10px; padding: 12px; display: grid; gap: 8px; opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55); z-index: 3; }
.mx-menu.show { opacity: 1; transform: none; }
.mx-menu-t { font-size: 14px; }
.mx-menu .mx-select { margin-top: 0; max-width: none; }
.mx-opts { background: #1e1f22; border-radius: 8px; padding: 6px; display: grid; gap: 2px; }
.mx-opt { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; }
.mx-opt b { display: block; font-size: 14px; color: #f2f3f5; font-weight: 600; }
.mx-opt small { display: block; font-size: 12px; color: var(--muted); }
.mx-opt.on, .mx-opt:hover { background: #404249; }
.mx-float .mx-msg.eph { background: none; padding: 0; }

@media (min-width: 1001px) { .l-row:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.mx-btns { max-width: none; }
.mx-emb, .mx-cont { max-width: 540px; }

.mx-pair { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; align-items: start; }
.mx-members.standalone { border: 1px solid #1f1f22; border-radius: 12px; background: #2b2d31; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); padding: 14px 8px; }
@media (max-width: 900px) { .mx-pair { grid-template-columns: minmax(0, 1fr); } }
.mx-name.white { color: #fff; }
.mx-dm-ava { width: 22px; height: 22px; border-radius: 50%; }

/* monitor: the window on top, the bots of the member list as a strip below it */
.mx-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mx-members.standalone { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; padding: 12px 10px 10px; }
.mx-members.standalone .mx-m-cat { grid-column: 1 / -1; margin: 0 6px 2px; }
@media (max-width: 900px) { .mx-members.standalone { grid-template-columns: minmax(0, 1fr); } }
.mx-emb.shot { max-width: none; }

.mx-win.has-side.wide-side { grid-template-columns: 260px minmax(0, 1fr); }
.mx-sidecard { background: var(--side, #2b2d31); border: 1px solid #1f1f22; border-radius: 12px; padding: 0 8px 10px; overflow: hidden; color: #dbdee1; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); --muted: #949ba4; }
.mx-sidecard .mx-guild { margin: 0 -8px 6px; }
.mx-sidecard .mx-chs { display: block; column-count: 2; column-gap: 14px; }
.mx-sidecard .mx-chs > * { break-inside: avoid; }
.mx-sidecard .mx-cat, .mx-sidecard .mx-vu { grid-column: auto; }
@media (max-width: 700px) { .mx-win.has-side.wide-side { grid-template-columns: 150px minmax(0, 1fr); } .mx-sidecard .mx-chs { column-count: 1; } .mx-sidecard { height: 300px; } }

/* phones: the avatars go, fields stack, windows get taller (the same words need more lines) */
@media (max-width: 700px) {
    .mx-win { height: calc(var(--mx-h) * var(--mx-m, 1.25)); }
    .mx-ava { display: none; }
    .mx-msg { padding: 3px 10px; }
    .mx-emb-field { grid-column: span 12 !important; }
    .mx-emb-fields { gap: 6px; }
    .mx-emb.has-thumb { padding-right: 62px; }
    .mx-emb-thumb { width: 44px; height: 44px; }
    .mx-win.has-side.wide-side { grid-template-columns: minmax(0, 1fr); }
    .mx-win.wide-side .mx-main { display: none; }
    .mx-win.wide-side .mx-side { padding: 0 12px; }
    .mx-win.wide-side .mx-ch { font-size: 15px; }
    .mx-sidecard { height: auto !important; min-height: 280px; }
    .mx-btn { padding: 0 9px; font-size: 12.5px; }
    .mx-cont, .mx-emb { max-width: none; }
    .mx-pic { border-radius: 6px; }
    .mx-float { right: 8px; left: 8px; width: auto; }
}