/* The tape-deck signs (play, fast-forward, rewind, eject, and the buttons' arrow) drawn as shapes. The page's text
   keeps the old characters (▶ ◀ ▶▶ ◀◀ ⏏) for anything that reads it, but an iPhone paints those characters as
   emoji, so the character is hidden and the shape is drawn in the text's own colour instead (owner, 14 Nov 2026). */
:root {
  --ico-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2.6 13.4 8 4 13.4Z' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12 2.6 2.6 8 12 13.4Z' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-ff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2.6 3 11 8 2.6 13ZM12.6 3 21 8 12.6 13Z' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-rw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M21.4 3 13 8 21.4 13ZM11.4 3 3 8 11.4 13Z' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-eject: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.6 13.2 8.6H2.8Z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Crect x='2.4' y='11' width='11.2' height='2.8' rx='.9'/%3E%3C/svg%3E");
}

/* the buttons' arrow (◀ in Hebrew, mirrored in English by home.css) and the PLAY key's ▶ */
.tri { display: inline-block; width: .82em; height: .9em; vertical-align: -.1em; overflow: hidden; white-space: nowrap; text-indent: 200vw; letter-spacing: 0;
  background: currentColor; -webkit-mask: var(--ico-back) center / contain no-repeat; mask: var(--ico-back) center / contain no-repeat; }
.key__face .tri { -webkit-mask-image: var(--ico-play); mask-image: var(--ico-play); }

/* the bar's transport window: ▶ / ▶▶ / ◀◀ / ⏏ */
.transport__mode { position: relative; overflow: hidden; white-space: nowrap; text-indent: 200vw; flex: none; width: 50px; }
@media (min-width: 900px) { .transport__mode { width: 68px; } }
.transport__mode::before { content: ""; position: absolute; inset: 0; margin: auto; width: .78em; height: .8em; text-indent: 0; background: currentColor;
  -webkit-mask: var(--ico-play) center / contain no-repeat; mask: var(--ico-play) center / contain no-repeat; }
.transport__mode[data-mode="ff"]::before, .transport__mode[data-mode="rw"]::before { width: 1.3em; }
.transport__mode[data-mode="ff"]::before { -webkit-mask-image: var(--ico-ff); mask-image: var(--ico-ff); }
.transport__mode[data-mode="rw"]::before { -webkit-mask-image: var(--ico-rw); mask-image: var(--ico-rw); }
.transport__mode[data-mode="eject"]::before { width: .9em; height: .9em; -webkit-mask-image: var(--ico-eject); mask-image: var(--ico-eject); }

/* the mixtape's year dial keys (◀◀ ▶▶) when the page draws them itself (the Rive dial paints its own keys) */
.mx-dk { position: relative; overflow: hidden; white-space: nowrap; text-indent: 200vw; }
.mx-dial:not([data-rive]) .mx-dk::before { content: ""; position: absolute; inset: 0 0 4px; margin: auto; width: 1.4em; height: .95em; background: currentColor;
  -webkit-mask: var(--ico-ff) center / contain no-repeat; mask: var(--ico-ff) center / contain no-repeat; }
.mx-dial:not([data-rive]) .mx-dk[data-dir="-1"]::before { -webkit-mask-image: var(--ico-rw); mask-image: var(--ico-rw); }

/* ▶ on a song's cover (hear a few seconds) */
.mx-pc .mx-pc__pv span { font-size: 0 !important; }
.mx-pc .mx-pc__pv span::before { content: ""; width: 38%; height: 40%; translate: 8% 0; background: var(--ink);
  -webkit-mask: var(--ico-play) center / contain no-repeat; mask: var(--ico-play) center / contain no-repeat; }