/* ---------------------------------------------------------------
   SOUND — the control, and the platform's box
   ---------------------------------------------------------------
   Bottom left, opposite the rail's readout, small enough to ignore. A truth
   with music should feel like it has a score, not like it opened a media
   player at you.
   --------------------------------------------------------------- */

.sound {
  position: fixed;
  left: max(18px, env(safe-area-inset-left));
  bottom: 84px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.sound__toggle {
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-faint);
  cursor: pointer;
  font: 700 9.5px/1 var(--mono);
  letter-spacing: .14em;
  transition: all 220ms var(--ease);
}
.sound__toggle:hover { color: var(--ink); }
.sound__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Playing, and saying so without a meter — the truth's own accent is enough,
   and anything more animated would compete with the thing being read. */
.sound.is-on .sound__toggle {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Their player, at their size. Not restyled, because it is theirs and because
   a platform embed dressed up as part of this page is the same trick a
   malicious author would want to play. */
.sound__frame {
  width: 320px;
  height: 152px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.sound__frame[hidden] { display: none; }

@media (max-width: 900px) {
  /* the rail and its readout own the bottom of a narrow screen */
  .sound { bottom: auto; top: max(64px, calc(env(safe-area-inset-top) + 52px)); left: 12px; }
  .sound__frame { width: min(300px, calc(100vw - 32px)); }
}