/* The mix engine · Fill The Room · The Cultivation Foundation */
.mx{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;margin:0 0 .3rem;
  padding:.3rem .55rem;background:var(--bg-soft);border:1px solid var(--rule);
  border-radius:8px}
.mx b{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.mx select{font:inherit;font-size:.88rem;padding:.35rem .5rem;
  border:1px solid var(--rule);border-radius:7px;background:var(--bg);
  color:var(--ink);max-width:min(100%,22rem)}
.mx__play{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;
  font-size:.92rem;padding:.45rem 1.1rem;border-radius:8px;
  background:var(--bronze);color:var(--bg)}
.mx__play[disabled]{opacity:.45;cursor:default}
.mx__play.on{background:var(--bg-card);color:var(--ink);
  border:1px solid var(--rule)}
.mx__t{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mx__loop{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;
  color:var(--ink-soft);cursor:pointer}
.mx__bar{flex:1 1 100%;height:6px;border-radius:3px;background:var(--rule);
  overflow:hidden;min-width:8rem}
.mx__bar i{display:block;height:100%;background:var(--bronze);width:0}
.mx__msg{flex:1 1 100%;font-size:.7rem;color:var(--muted);margin:0;
  line-height:1.3}
.mx__msg b{color:var(--bronze-deep)}

/* ⛔ one line, not a paragraph. The transport was 192px tall and the board has
   to share the window with it: the session, the desk and the board all belong
   in one screen, and a three-line advisory was eating a third of it. */
.mx__ears{font-size:.72rem;letter-spacing:.02em;color:var(--bronze-deep);
  background:var(--bg-card);border:1px solid var(--rule);border-radius:20px;
  padding:.22rem .6rem;white-space:nowrap;cursor:help}
.mx__note{font-size:.76rem;line-height:1.45;color:var(--ink-soft);
  background:var(--bg-soft);border:1px solid var(--rule);border-radius:9px;
  padding:.5rem .65rem;margin:.5rem 0 0}
.mx__note b{color:var(--bronze-deep)}