/* ═══════════════════════════════════════════════════════════════
   Animated "modes" scenes: talk, listen, room (lens lives in lens-scene.css).
   Driven by modes-scenes.js through step classes on the scene root.
   The HTML ships the step classes of the final frame, so no-JS and
   reduced-motion visitors see a complete, meaningful still.
   Only transform / opacity / filter are animated.
   ═══════════════════════════════════════════════════════════════ */

/* ── engine plumbing (shared with lens) ── */
.sc-live:not(.sc-run) *, .sc-live:not(.sc-run)::before, .sc-live:not(.sc-run)::after { animation-play-state: paused !important; }
.sc-snap, .sc-snap *, .sc-snap *::before, .sc-snap *::after { transition: none !important; animation: none !important; }

/* ── stage ── */
.ms {
  --lw: clamp(212px, 58vw, 266px);
  --ry0: -8deg;
  --t: .55s;
  position: relative; inline-size: 100%;
  display: grid; place-items: center;
  padding-block: 8px;
}
[dir="rtl"] .ms { --ry0: 8deg; }
.ms::before {
  content: ""; position: absolute; z-index: 0; inset-block-start: 50%; left: 50%;
  inline-size: calc(var(--lw) * 1.6); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .3), rgba(255, 106, 0, .1) 55%, transparent 75%);
  filter: blur(18px); pointer-events: none;
}
@media (prefers-color-scheme: light) {
  .ms::before { background: radial-gradient(closest-side, rgba(255, 106, 0, .22), rgba(255, 106, 0, .07) 55%, transparent 75%); }
}
.ms-rig {
  position: relative; z-index: 1;
  transform: perspective(1700px) rotateY(calc(var(--ry0) + var(--mx, 0) * 12deg)) rotateX(calc(3deg - var(--my, 0) * 8deg));
  transition: transform .7s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  .sc-live .ms-rig { animation: ms-float 7s ease-in-out infinite; }
}
@keyframes ms-float { 50% { translate: 0 -8px; } }
.ms .ms-phone { --w: var(--lw); }
.ms-phone .screen {
  background:
    radial-gradient(70% 38% at 50% 48%, rgba(255, 106, 0, .22), transparent 70%),
    #0a0908;
}
.ms-phone .glare { z-index: 9; }

/* ── in-phone app UI (mirrors the real Tarjuman screens) ── */
.ms-app {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; gap: calc(var(--w) * .035);
  padding: calc(var(--w) * .125) calc(var(--w) * .05) calc(var(--w) * .06);
  font: 400 calc(var(--w) * .043)/1.35 var(--font); color: #f7f4f0;
}
.ms-head { display: flex; align-items: center; gap: calc(var(--w) * .022); }
.ms-head .ms-logo { inline-size: calc(var(--w) * .075); block-size: calc(var(--w) * .075); }
.ms-head b { font-weight: 700; font-size: calc(var(--w) * .056); }
.ms-live {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: calc(var(--w) * .015);
  padding: calc(var(--w) * .008) calc(var(--w) * .03); border-radius: 999px;
  background: rgba(255, 106, 0, .16); color: #ff6a00; font-weight: 600; font-size: calc(var(--w) * .036);
}
.ms-live::before { content: ""; inline-size: calc(var(--w) * .016); aspect-ratio: 1; border-radius: 50%; background: #ff6a00; }
.ms-langs { display: flex; align-items: center; justify-content: center; gap: calc(var(--w) * .022); }
.ms-lang {
  display: inline-flex; align-items: center; gap: calc(var(--w) * .02); white-space: nowrap;
  padding: calc(var(--w) * .014) calc(var(--w) * .028) calc(var(--w) * .014) calc(var(--w) * .014);
  border-radius: 999px; background: #1b1918; border: 1px solid rgba(255, 255, 255, .1);
  font-weight: 600; font-size: calc(var(--w) * .04);
}
[dir="rtl"] .ms-lang { padding: calc(var(--w) * .014) calc(var(--w) * .014) calc(var(--w) * .014) calc(var(--w) * .028); }
.ms-lang i, .ms-glyph {
  display: inline-grid; place-items: center; font-style: normal; font-weight: 700;
  inline-size: calc(var(--w) * .07); block-size: calc(var(--w) * .07); border-radius: calc(var(--w) * .018);
  background: #f3ede6; color: #111; font-size: calc(var(--w) * .038);
}
.ms-lang em { font-style: normal; color: #ff6a00; font-size: calc(var(--w) * .032); padding: 0 calc(var(--w) * .015); border-radius: 999px; background: rgba(255, 106, 0, .14); }
.ms-arrow { color: #ff6a00; font-weight: 700; }
.ms-swap {
  inline-size: calc(var(--w) * .085); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 106, 0, .16); color: #ff6a00;
}
.ms-swap svg { inline-size: 58%; block-size: 58%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the sound ring (app logo): bars dance while someone speaks */
.ms-ring { position: relative; inline-size: calc(var(--w) * .5); aspect-ratio: 1; margin-inline: auto; flex: none; }
.ms-ring::before { /* core */
  content: ""; position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff8a2e, #ff6a00 60%, #e85d00);
  box-shadow: 0 0 calc(var(--w) * .08) rgba(255, 106, 0, .75);
  transition: transform .5s var(--ease-spring);
}
.ms-ring::after { content: ""; position: absolute; inset: 29%; border-radius: 50%; border: calc(var(--w) * .006) solid #f3ede6; }
.ms-ring i {
  position: absolute; left: 50%; top: 50%;
  inline-size: calc(var(--w) * .013); block-size: calc(var(--w) * .085 * var(--h));
  margin-left: calc(var(--w) * -.0065); transform-origin: 50% 0;
  transform: rotate(var(--a)) translateY(calc(var(--w) * .118));
}
.ms-ring i b { display: block; block-size: 100%; border-radius: 99px; background: #f3ede6; transform-origin: 50% 0; }
.ms-ring i.o b { background: #ff6a00; }
@keyframes ms-bar { 0% { transform: scaleY(.45); } 100% { transform: scaleY(1.25); } }

.ms-status { margin: 0; text-align: center; font-weight: 700; font-size: calc(var(--w) * .046); color: #f3ede6; }

/* language line streaming word by word */
.ms-words > span { display: inline-block; white-space: pre; transition: opacity .45s var(--ease-out), filter .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * var(--wd, 110ms)); }

/* ── glass cards outside the phone ── */
.ms-card {
  position: absolute; z-index: 3; border-radius: var(--r);
  padding: 12px 14px 13px; inline-size: min(212px, 38%);
  translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px);
  transition: translate .7s var(--ease-out), opacity var(--t) var(--ease-out), transform .7s var(--ease-spring), filter var(--t);
}
.ms-who { display: flex; align-items: center; gap: 10px; }
.ms-who b { display: block; font-weight: 700; font-size: .98rem; line-height: 1.25; }
.ms-who small { display: block; color: var(--faint); font-size: .76rem; line-height: 1.3; }
.ms-tag { font-family: var(--mono); font-size: .7rem; color: var(--accent-ink); border: 1px solid currentColor; border-radius: 6px; padding: 0 6px; line-height: 1.55; margin-inline-start: auto; align-self: start; }
.ms-av {
  position: relative; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; color: #0a0a0a;
  background: linear-gradient(150deg, #f7f4f0, #cfc6bb);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 6px 16px -6px rgba(0, 0, 0, .6);
}
.ms-av.o { background: linear-gradient(150deg, #ff8a2e, #ff6a00); }
.ms-av svg { inline-size: 26px; block-size: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* earbud that flies from the phone into a person's ear */
.ms-bud {
  position: absolute; inset-block-end: -4px; inset-inline-end: -8px; z-index: 2;
  display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: #fff; color: #0a0a0a; font: 700 .62rem/1 "IBM Plex Sans", var(--font);
  box-shadow: 0 0 0 2px var(--surface), 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .9s var(--ease-out), opacity .4s, background-color .3s, box-shadow .3s;
}
.ms-bud.hot { background: #ff6a00; box-shadow: 0 0 0 2px var(--surface), 0 0 16px 2px rgba(255, 106, 0, .8); }

/* sound dots flying from a source into a target */
.ms-dots { position: absolute; inset-block-end: 4px; inset-inline-end: -2px; inline-size: 12px; block-size: 12px; pointer-events: none; z-index: 4; }
.ms-dots i { position: absolute; inset: 0; border-radius: 50%; background: #ff6a00; box-shadow: 0 0 12px 2px rgba(255, 106, 0, .8); opacity: 0; }
@keyframes ms-fly {
  0% { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.5); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: none; }
}

/* lines that swap inside a card (stacked in one grid cell) */
.ms-lines { display: grid; margin-block-start: 8px; }
.ms-ln { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); filter: blur(5px); transition: opacity var(--t) var(--ease-out), transform .6s var(--ease-out), filter var(--t) var(--ease-out); }
.ms-ln small { display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: .76rem; line-height: 1.3; }
.ms-ln small .i { inline-size: 14px; block-size: 14px; color: var(--accent-ink); }
.ms-ln p { margin: 2px 0 0; font-size: 1.04rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.ms-ln.on { opacity: 1; transform: none; filter: none; }
.ms-wave { display: inline-flex; align-items: center; gap: 2px; block-size: 12px; margin-inline-start: 2px; }
.ms-wave i { inline-size: 2.5px; block-size: 100%; border-radius: 2px; background: var(--accent-ink); transform: scaleY(.35); }
@keyframes ms-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* ═════════════════════ TALK ═════════════════════ */
.ms-talk .ms-ears { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--w) * .025); }
.ms-earc {
  border-radius: calc(var(--w) * .04); padding: calc(var(--w) * .025) calc(var(--w) * .035);
  background: #161413; border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .4s, box-shadow .4s;
}
.ms-earc small { display: block; color: #a39c95; font-size: calc(var(--w) * .033); }
.ms-earc b { display: flex; align-items: center; gap: calc(var(--w) * .018); font-size: calc(var(--w) * .04); font-weight: 600; }
.ms-earc b .ms-glyph { inline-size: calc(var(--w) * .058); block-size: calc(var(--w) * .058); font-size: calc(var(--w) * .032); }
.ms-lv { display: flex; gap: calc(var(--w) * .01); margin-block-start: calc(var(--w) * .02); block-size: calc(var(--w) * .03); align-items: center; }
.ms-lv i { inline-size: calc(var(--w) * .012); block-size: 100%; border-radius: 2px; background: rgba(255, 106, 0, .35); transform: scaleY(.35); }
.ms-earc.hot { border-color: #ff6a00; box-shadow: 0 0 calc(var(--w) * .05) rgba(255, 106, 0, .35); }
.ms-earc.hot .ms-lv i { background: #ff6a00; animation: ms-wave .7s ease-in-out infinite; animation-delay: calc(var(--k) * -.13s); }

.ms-tx { position: relative; display: grid; flex: 1; min-block-size: 0; }
.ms-entry {
  grid-area: 1 / 1; align-self: start;
  border-radius: calc(var(--w) * .045); padding: calc(var(--w) * .035) calc(var(--w) * .04);
  background: #151312; border: 1px solid rgba(255, 255, 255, .09);
  opacity: 0; transform: translateY(calc(var(--w) * .04)); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.ms-entry small { display: flex; align-items: center; justify-content: space-between; color: #a39c95; font-size: calc(var(--w) * .033); }
.ms-entry small span { color: #ff6a00; font-weight: 600; padding: 0 calc(var(--w) * .02); border-radius: 999px; background: rgba(255, 106, 0, .14); }
.ms-entry .o { margin: calc(var(--w) * .015) 0 0; color: #a39c95; font-size: calc(var(--w) * .04); }
.ms-entry .t { margin: calc(var(--w) * .01) 0 0; font-weight: 700; font-size: calc(var(--w) * .056); line-height: 1.3; }
.ms-entry .t > span { opacity: 0; filter: blur(4px); transform: translateY(30%); }

/* desktop placement */
.ms-talk .ms-card.a { inset-block-start: 3%; inset-inline-start: 0; }
.ms-talk .ms-card.b { inset-block-end: 3%; inset-inline-end: 0; }
.ms-badge {
  position: absolute; z-index: 4; inset-block-start: 41%; inset-inline-end: 2%;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.9);
  translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -6px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring), translate .7s var(--ease-out);
}
.ms-badge .i { color: var(--accent-ink); }

/* talk states — buds */
.ms-talk:not(.is-buds) .ms-bud { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.4); }
.ms-talk.is-out .ms-bud { opacity: 0; transition-duration: .4s; }
/* A speaks */
.ms-talk.is-a-speak .a .ms-ln.say { opacity: 1; transform: none; filter: none; }
.ms-talk.is-a-speak:not(.is-a-tr) .a .ms-wave i,
.ms-talk.is-b-speak:not(.is-b-tr) .b .ms-wave i { animation: ms-wave .55s ease-in-out infinite; animation-delay: calc(var(--k) * -.11s); }
.ms-talk.is-a-speak:not(.is-a-tr) .ms-ring i b,
.ms-talk.is-b-speak:not(.is-b-tr) .ms-ring i b { animation: ms-bar .42s ease-in-out infinite alternate; animation-delay: var(--d); }
.ms-talk.is-a-tr:not(.is-b-speak) .e1, .ms-talk.is-b-tr .e2 { opacity: 1; transform: none; }
.ms-talk.is-b-tr .e1 { opacity: 0; transform: translateY(calc(var(--w) * -.05)); }
.ms-talk.is-a-tr .e1 .t > span, .ms-talk.is-b-tr .e2 .t > span { opacity: 1; filter: none; transform: none; }
.ms-talk.is-a-tr .e1 .t > span { transition-delay: calc(250ms + var(--i, 0) * 120ms); }
.ms-talk.is-b-tr .e2 .t > span { transition-delay: calc(250ms + var(--i, 0) * 100ms); }
/* A → B */
.ms-talk.is-a-send:not(.is-b-speak) .b .ms-ln.hear { opacity: 1; transform: none; filter: none; transition-delay: .7s; }
.ms-talk.is-a-send .b .ms-dots i, .ms-talk.is-b-send .a .ms-dots i { animation: ms-fly .95s cubic-bezier(.5, 0, .3, 1) both; animation-delay: calc(var(--k) * .16s); }
.ms-talk.is-a-send:not(.is-b-speak) .b .ms-bud, .ms-talk.is-b-send:not(.is-out) .a .ms-bud { background: #ff6a00; box-shadow: 0 0 0 2px var(--surface), 0 0 16px 2px rgba(255, 106, 0, .8); transition-delay: .7s; }
.ms-talk.is-a-send:not(.is-b-speak) .ms-earc.r, .ms-talk.is-b-send:not(.is-out) .ms-earc.l { border-color: #ff6a00; box-shadow: 0 0 calc(var(--w) * .05) rgba(255, 106, 0, .35); }
.ms-talk.is-a-send:not(.is-b-speak) .ms-earc.r .ms-lv i, .ms-talk.is-b-send:not(.is-out) .ms-earc.l .ms-lv i { background: #ff6a00; animation: ms-wave .7s ease-in-out infinite; animation-delay: calc(var(--k) * -.13s); }
/* B speaks, language auto-detected */
.ms-talk.is-b-send .a .ms-ln.say { opacity: 0; transform: translateY(-8px); filter: blur(5px); }
.ms-talk:not(.is-a-speak) .a .ms-ln.idle, .ms-talk:not(.is-a-send) .b .ms-ln.idle { opacity: 1; transform: none; filter: none; }
.ms-ln.idle small { font-size: .84rem; color: var(--muted); }
.ms-talk.is-b-speak .b .ms-ln.say { opacity: 1; transform: none; filter: none; }
.ms-talk.is-b-speak:not(.is-out) .ms-badge { opacity: 1; transform: none; }
.ms-talk.is-b-speak:not(.is-b-send) .ms-lang em { animation: ms-ping 1s ease-out 2; }
@keyframes ms-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 106, 0, .7); } 100% { box-shadow: 0 0 0 calc(var(--w) * .03) rgba(255, 106, 0, 0); } }
/* B → A */
.ms-talk.is-b-send .a .ms-ln.hear { opacity: 1; transform: none; filter: none; transition-delay: .7s; }
/* out */
.ms-talk.is-out .ms-ln, .ms-talk.is-out .ms-entry, .ms-talk.is-out .ms-badge { opacity: 0 !important; filter: blur(4px); transition-delay: 0s !important; }

/* ═════════════════════ LISTEN ═════════════════════ */
.ms-now {
  border-radius: calc(var(--w) * .045); padding: calc(var(--w) * .035) calc(var(--w) * .04) calc(var(--w) * .04);
  background: linear-gradient(180deg, rgba(255, 106, 0, .09), rgba(255, 106, 0, .02)), #141211;
  border: 1px solid rgba(255, 255, 255, .1);
}
.ms-now small { display: flex; align-items: center; justify-content: space-between; color: #a39c95; font-size: calc(var(--w) * .034); }
.ms-now small span { color: #ff6a00; font-weight: 600; padding: 0 calc(var(--w) * .02); border-radius: 999px; background: rgba(255, 106, 0, .14); }
.ms-now .o { margin: calc(var(--w) * .02) 0 0; color: #a39c95; font-size: calc(var(--w) * .039); line-height: 1.45; min-block-size: 4.35em; }
.ms-now .t { margin: calc(var(--w) * .02) 0 0; font-weight: 700; font-size: calc(var(--w) * .053); line-height: 1.38; min-block-size: 5.52em; }
.ms-now .ms-words > span { opacity: 0; filter: blur(4px); transform: translateY(25%); }
.ms-chips { display: flex; justify-content: center; gap: calc(var(--w) * .025); margin-block-start: auto; }
.ms-chips span {
  display: inline-flex; align-items: center; gap: calc(var(--w) * .015); padding: calc(var(--w) * .018) calc(var(--w) * .035);
  border-radius: calc(var(--w) * .03); border: 1px solid rgba(255, 255, 255, .14); font-weight: 600; font-size: calc(var(--w) * .038);
}
.ms-chips span:first-child { border-color: #ff6a00; color: #ff6a00; }
.ms-listen .ms-ring { inline-size: calc(var(--w) * .42); }

.ms-pa { inset-block-start: 1.5%; inset-inline-start: 0; inline-size: auto; padding: 10px 16px 10px 12px; }
[dir="rtl"] .ms-pa { padding: 10px 12px 10px 16px; }
.ms-pa .ms-av { background: linear-gradient(150deg, #2a2725, #121110); color: #ff6a00; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ms-waves { position: absolute; inset-block-start: 50%; inset-inline-start: 34px; z-index: -1; pointer-events: none; }
.ms-waves i {
  position: absolute; inset-block-start: -40px; inset-inline-start: -40px; inline-size: 80px; block-size: 80px; border-radius: 50%;
  border: 2px solid #ff6a00; opacity: 0;
}
@keyframes ms-emit { 0% { opacity: .85; transform: scale(.45); } 100% { opacity: 0; transform: scale(2.3); } }
.ms-earcard { inset-block-start: 56%; inset-inline-end: 0; inline-size: auto; padding: 10px 16px 10px 12px; }
[dir="rtl"] .ms-earcard { padding: 10px 12px 10px 16px; }
.ms-earcard .ms-lv { block-size: 16px; gap: 3px; margin: 0; }
.ms-earcard .ms-lv i { inline-size: 3px; background: var(--accent-ink); opacity: .35; }
.ms-sum { inset-block-end: 5%; left: 50%; margin-inline-start: 0; inline-size: min(330px, 92%); translate: calc(-50% + var(--mx, 0) * -16px) calc(var(--my, 0) * -10px); padding: 16px 18px 17px; }
.ms-sum h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--text); }
.ms-sum h4 .i { color: var(--accent-ink); }
.ms-sum ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ms-sum li { display: flex; gap: 10px; align-items: start; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--text); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), filter .5s; }
.ms-sum li .i { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 3px; color: var(--accent-ink); stroke-width: 2.4; }

/* listen states */
.ms-listen.is-on:not(.is-sum) .ms-waves i { animation: ms-emit 1.8s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--k) * .6s); }
.ms-listen.is-on:not(.is-sum) .ms-ring i b { animation: ms-bar .45s ease-in-out infinite alternate; animation-delay: var(--d); }
.ms-listen.is-src .o > span { opacity: 1; filter: none; transform: none; }
.ms-listen .o { --wd: 85ms; }
.ms-listen .t { --wd: 120ms; }
.ms-listen.is-tr .t > span { opacity: 1; filter: none; transform: none; }
.ms-listen.is-tr:not(.is-sum) .ms-earcard .ms-lv i { opacity: 1; animation: ms-wave .6s ease-in-out infinite; animation-delay: calc(var(--k) * -.12s); }
.ms-listen.is-tr:not(.is-sum) .ms-earcard .ms-bud { background: #ff6a00; box-shadow: 0 0 0 2px var(--surface), 0 0 16px 2px rgba(255, 106, 0, .8); }
.ms-listen.is-tr .ms-earcard .ms-dots i { animation: ms-fly 1s cubic-bezier(.5, 0, .3, 1) 3 both; animation-delay: calc(var(--k) * .2s); }
.ms-listen:not(.is-sum) .ms-sum { opacity: 0; transform: translateY(40px) scale(.95); filter: blur(4px); }
.ms-listen:not(.is-sum) .ms-sum li { opacity: 0; transform: translateY(10px); }
.ms-listen.is-sum .ms-sum li { transition-delay: calc(.35s + var(--i, 0) * .18s); }
.ms-listen.is-out .ms-sum, .ms-listen.is-out .ms-now .ms-words > span { opacity: 0 !important; filter: blur(4px); transition-delay: 0s !important; }
.ms-listen.is-out .ms-sum { transform: translateY(30px); }

/* ═════════════════════ ROOM ═════════════════════ */
.ms-room {
  display: grid; place-items: stretch;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr) minmax(0, 196px);
  grid-template-areas: "code code code" ". n ." "w . e" ". s .";
  row-gap: 26px; column-gap: 10px; padding-block: 0;
  inline-size: min(100%, 600px);
}
.ms-room::before { inline-size: 90%; }
.ms-code {
  grid-area: code; justify-self: center; position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px;
  font-size: .82rem; color: var(--faint); white-space: nowrap;
}
.ms-code b { font-family: var(--mono); font-size: 1.02rem; color: var(--text); letter-spacing: .18em; direction: ltr; unicode-bidi: isolate; }
.ms-code .i { color: var(--accent-ink); }

.ms-table {
  position: absolute; z-index: 0; left: 50%; inset-block-start: 56%; translate: -50% -50%;
  inline-size: min(96%, 540px); aspect-ratio: 1.75; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 106, 0, .16), transparent 70%),
    radial-gradient(100% 100% at 50% 30%, #262321, #121110 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -10px 30px rgba(0, 0, 0, .5), 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 10px rgba(255, 106, 0, .05);
  pointer-events: none;
}
@media (prefers-color-scheme: light) {
  .ms-table { background: radial-gradient(closest-side, rgba(255, 106, 0, .14), transparent 70%), radial-gradient(100% 100% at 50% 30%, #2a2522, #151210 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px rgba(60, 30, 0, .55); }
}
.ms-table .ms-hub { position: absolute; left: 50%; top: 50%; inline-size: 13%; aspect-ratio: 1; translate: -50% -50%; }
.ms-table .ms-hub svg { inline-size: 100%; block-size: 100%; filter: drop-shadow(0 0 14px rgba(255, 106, 0, .7)); }
.ms-rip { position: absolute; left: 50%; top: 50%; inline-size: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; border: 2px solid #ff6a00; opacity: 0; box-shadow: 0 0 20px rgba(255, 106, 0, .5); }
@keyframes ms-rip { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
/* phones lying on the table, each facing its owner */
.ms-mini {
  position: absolute; left: 50%; top: 50%; inline-size: 6%; aspect-ratio: .5; border-radius: 22%/11%;
  background: linear-gradient(160deg, #6d6a66, #2b2a29 40%, #4a4846);
  padding: 1.2%;
  transform: translate(-50%, -50%) rotate(var(--r)) translateY(var(--d)) ;
}
.ms-mini::before { content: ""; display: block; block-size: 100%; border-radius: inherit; background: radial-gradient(circle at 50% 45%, #ff6a00 0 14%, transparent 16%), radial-gradient(circle at 50% 45%, transparent 0 22%, rgba(243, 237, 230, .7) 23% 26%, transparent 27%), #0b0a09; }
.ms-mini::after { content: ""; position: absolute; inset: 1.2%; border-radius: inherit; box-shadow: 0 0 14px 3px rgba(255, 106, 0, .9); opacity: 0; transition: opacity .4s; }

.ms-seat { position: relative; z-index: 2; inline-size: auto; translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -6px); }
.ms-seat.n { grid-area: n; } .ms-seat.s { grid-area: s; } .ms-seat.w { grid-area: w; } .ms-seat.e { grid-area: e; }
.ms-room .ms-card { position: relative; padding: 11px 13px 12px; }
.ms-seat .ms-av { inline-size: 40px; block-size: 40px; font-size: .95rem; }
.ms-seat .ms-lines { margin-block-start: 6px; min-block-size: 2.8em; }
.ms-seat .ms-ln p { font-size: .98rem; }
.ms-seat .ms-dots { inset-block-start: 16px; inset-inline-start: 20px; inset-inline-end: auto; inset-block-end: auto; }
.ms-seat .ms-wave { opacity: 0; transition: opacity .3s; }

/* room states */
.ms-room:not(.is-join) .ms-seat { opacity: 0; transform: scale(.9) translateY(12px); }
.ms-room .ms-seat { transition-delay: calc(var(--i, 0) * 120ms); }
.ms-room.is-s1:not(.is-s2) .ln1.say, .ms-room.is-s1-out:not(.is-s2) .ln1, .ms-room.is-s2 .ln2.say, .ms-room.is-s2-out .ln2 { opacity: 1; transform: none; filter: none; }
.ms-room.is-s1-out .ln1:not(.say), .ms-room.is-s2-out .ln2:not(.say) { transition-delay: .55s; }
.ms-room.is-s1:not(.is-s1-out) .spk1 .ms-wave, .ms-room.is-s2:not(.is-s2-out) .spk2 .ms-wave { opacity: 1; }
.ms-room.is-s1:not(.is-s1-out) .spk1 .ms-wave i, .ms-room.is-s2:not(.is-s2-out) .spk2 .ms-wave i { animation: ms-wave .55s ease-in-out infinite; animation-delay: calc(var(--k) * -.11s); }
.ms-room.is-s1:not(.is-s2) .spk1 .ms-av, .ms-room.is-s2 .spk2 .ms-av { box-shadow: 0 0 0 3px #ff6a00, 0 0 22px 4px rgba(255, 106, 0, .6); }
.ms-room.is-s1-out .r1, .ms-room.is-s2-out .r2 { animation: ms-rip 1.4s cubic-bezier(.2, .6, .3, 1) both; animation-delay: calc(var(--k, 0) * .25s); }
.ms-room.is-s1-out .d1 i, .ms-room.is-s2-out .d2 i { animation: ms-fly .9s cubic-bezier(.5, 0, .3, 1) both; animation-delay: calc(var(--k) * .15s); }
.ms-room.is-s1-out:not(.is-s2) .ms-mini:not(.m1)::after, .ms-room.is-s2-out .ms-mini:not(.m2)::after { opacity: 1; transition-delay: .5s; }
.ms-room.is-s1:not(.is-s2) .ms-mini.m1::after, .ms-room.is-s2 .ms-mini.m2::after { opacity: 1; }
.ms-room.is-out .ms-ln { opacity: 0 !important; filter: blur(4px); transition-delay: 0s !important; }
.ms-room.is-out .ms-mini::after { opacity: 0 !important; }

/* ═════════════════════ small screens ═════════════════════ */
@media (max-width: 600px) {
  .ms { --lw: clamp(200px, 60vw, 240px); }
  .ms-card { inline-size: min(214px, 66%); padding: 10px 12px 11px; }
  .ms-ln p { font-size: .98rem; }
  .ms-talk { padding-block: 74px 86px; }
  .ms-talk .ms-card.a { inset-block-start: 0; }
  .ms-talk .ms-card.b { inset-block-end: 0; }
  .ms-badge { inset-block-start: 44%; inset-inline-end: auto; left: 50%; font-size: .8rem; padding: 7px 12px; translate: -50% 0; }
  .ms-listen { padding-block: 64px 8px; }
  .ms-pa { inset-block-start: 0; }
  .ms-earcard { inset-block-start: 62%; }
  .ms-sum { inline-size: min(300px, 96%); padding: 13px 15px 14px; }
  .ms-sum li { font-size: .95rem; }
  .ms-room { grid-template-columns: 1fr 1fr; grid-template-areas: "code code" "n e" "table table" "w s"; row-gap: 14px; column-gap: 10px; }
  .ms-room .ms-card { inline-size: auto; }
  .ms-table { position: relative; grid-area: table; left: auto; inset-block-start: auto; translate: none; inline-size: 100%; aspect-ratio: 2.7; margin-block: -4px; }
  .ms-mini { inline-size: 5%; }
  .ms-table .ms-hub { inline-size: 15%; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-rig { transform: perspective(1700px) rotateY(var(--ry0)) rotateX(3deg); }
  .ms-card, .ms-badge { translate: none; }
  .ms-sum { translate: -50% 0; }
}