.totm-ms-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  width: min(620px, 100%);
  min-height: 86px;
  margin: 14px 0 6px;
  overflow: hidden;
  border: 1px solid rgba(187, 132, 90, .32);
  border-left: 3px solid #ad704e;
  background: #12100f;
  color: #e7dfd8;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .2);
  cursor: pointer;
}
.totm-ms-card:hover, .totm-ms-card:focus-visible { border-color: rgba(197, 138, 103, .78); outline: none; }
.totm-ms-card__art { width: 86px; height: 100%; min-height: 86px; object-fit: cover; }
.totm-ms-card__copy { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 11px 14px; }
.totm-ms-card__eyebrow { color: #a98772; font: 700 9px/1.2 Arial, sans-serif; letter-spacing: .13em; }
.totm-ms-card__title { overflow: hidden; color: #eee7e1; font: 600 16px/1.22 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.totm-ms-card__artist { overflow: hidden; color: #9f9995; font: 12px/1.3 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.totm-ms-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.totm-ms-card__play { color: #c58a67; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.totm-ms-card__source { margin-left: auto; color: #76716e; font: 10px/1.2 Arial, sans-serif; }
a.totm-ms-ready::after { content: "  PLAY"; color: #c58a67; font: 700 9px/1 Arial, sans-serif; letter-spacing: .09em; }

.totm-ms-dock {
  position: fixed;
  z-index: 2147483000;
  right: 18px;
  bottom: 14px;
  width: min(680px, calc(100vw - 36px));
  overflow: hidden;
  border: 1px solid rgba(187, 132, 90, .42);
  background: #0e0d0d;
  color: #e7dfd8;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
}
.totm-ms-dock[hidden] { display: none !important; }
.totm-ms-dock__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px 8px 13px; border-bottom: 1px solid rgba(187, 132, 90, .22); background: #171311; }
.totm-ms-dock__mark { color: #ad704e; font: 800 10px/1 Arial, sans-serif; letter-spacing: .11em; }
.totm-ms-dock__identity { display: grid; gap: 2px; min-width: 0; }
.totm-ms-dock__type { color: #8d7a6f; font: 700 8px/1.1 Arial, sans-serif; letter-spacing: .12em; }
.totm-ms-dock__title { overflow: hidden; color: #e7dfd8; font: 600 12px/1.2 Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.totm-ms-dock__close { border: 0; padding: 0; background: transparent; color: #827b77; font: 700 9px/1 Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.totm-ms-dock__frame { display: block; width: 100%; height: 166px; border: 0; background: #090909; }
.totm-ms-dock__frame[hidden] { display: none !important; }
.totm-ms-dock__doors { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.totm-ms-dock__doors:empty { display: none; }
.totm-ms-dock__door { padding: 10px 12px; border: 1px solid rgba(187, 132, 90, .42); color: #d5a183 !important; font: 700 10px/1 Arial, sans-serif; letter-spacing: .06em; text-decoration: none !important; text-transform: uppercase; }
.totm-ms-dock__door:hover, .totm-ms-dock__door:focus-visible { border-color: #d5a183; color: #f2eee9 !important; }

@media (max-width: 520px) {
  .totm-ms-card { grid-template-columns: 68px minmax(0, 1fr); }
  .totm-ms-card__art { width: 68px; min-height: 82px; }
  .totm-ms-card__source { display: none; }
  .totm-ms-dock { right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .totm-ms-dock__mark { display: none; }
  .totm-ms-dock__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .totm-ms-dock__frame { height: 150px; }
}