html {
  touch-action: manipulation;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* padding-bottom: 56px; */
}

.PlayerUI {
  --h: 56px;
  --mw: calc(900px - 95px * 2);

  position: absolute;
  left: 0; bottom: 0;/* right: 0;*/
  width: 100vw;

  display: flex;
  justify-content: center;
  align-items: center;

  /* background-color: #f2f2f2; */
  /* border-top: 1px solid #cecece; */

  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button {
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.PlayerUI .__inner {
  position: relative;
  width: 100%;
  max-width: var(--mw);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: var(--h);
}

.Icon {
  --size: 24px;
  width: var(--size);
  height: var(--size);
  display: inline-block;

  background-repeat: no-repeat;
  background-size: var(--size);
  background-position: center;

  pointer-events: none;
}

.PlayerUI .Icon.--playback,
.Icon.--play { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0YwMCIgZD0iTTggNXYxNGwxMS03eiIvPjwvc3ZnPg==') }
.PlayerUI .__playback .Icon { --size: 32px !important }
.PlayerUI .__playback {
  --size: 48px !important;
  position: relative;
}

.PlayerUI.--playing .Icon.--playback,
.Icon.--pause { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iI0YwMCIgZD0iTTYgMTloNFY1SDZ2MTR6bTgtMTR2MTRoNFY1aC00eiIvPjwvc3ZnPg=='); }

.Icon.--forward,
.Icon.--backward { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTcgMThsOC02LTgtNnYxMnptOC0xMnYxMmgyVjZoLTJ6Ii8+PC9zdmc+Cg=='); }

.Icon.--backward { transform: rotate(180deg); }

.Icon.--rewind-forward,
.Icon.--rewind-backward {
  --scale: 1.2;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwMCA1MDAiPjxwYXRoIGZpbGw9IiNGMDAiIGQ9Ik0gMTc3LjY1OSAxOTguMzE0IEwgOTQuODg4IDI1MC4wMzEgTCAxNTMuMzY5IDI4Ni41NTkgQyAxODUuNDY5IDMwNi42NjcgMjIyLjczNCAzMjkuOTEyIDIzNi4wNzkgMzM4LjI3NSBMIDI2MC4zNjkgMzUzLjQ2NCBMIDI2MC41NTQgMzA4LjU3NCBDIDI2MC42NzcgMjczLjE1MyAyNjAuODYxIDI2My44MDYgMjYxLjQ3NiAyNjQuMDUyIEMgMjYxLjg0NSAyNjQuMTc1IDI5NC4zMTQgMjg0LjQwNiAzMzMuNTQ3IDMwOC45NDMgTCA0MDQuODgxIDM1My41MjYgTCA0MDUuMDY1IDMwMS41NjMgQyA0MDUuMTI3IDI3My4wMyA0MDUuMTI3IDIyNi40MTcgNDA1LjA2NSAxOTguMDY4IEwgNDA0Ljg4MSAxNDYuNDc0IEwgMzMzLjI0IDE5MS4zNjUgQyAyOTMuODIyIDIxNi4wMjQgMjYxLjQxNCAyMzYuMTk1IDI2MS4xNjggMjM2LjE5NSBDIDI2MC44NjEgMjM2LjE5NSAyNjAuNjE1IDIxNi4wMjQgMjYwLjU1NCAxOTEuNDI3IEwgMjYwLjM2OSAxNDYuNTk3IEwgMTc3LjY1OSAxOTguMzE0IFoiIHN0eWxlPSIiLz48L3N2Zz4=);
  transform: scale(var(--scale));
}
.Icon.--rewind-forward { transform: scale(var(--scale)) rotate(180deg); }

.Icon.--speed {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj4KICA8ZyBzdHJva2Utd2lkdGg9IjAiIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIC0yNjEuOTM1MzMzLCAtMjYyLjExNTU3KSI+CiAgICA8cGF0aCBkPSJNNDk1LjUgMzE5LjZjLTEuNi4yLTcgLjktMTIgMS41LTMyLjIgMy44LTY1LjcgMTguMy05MS44IDM5LjctMjMuMyAxOC45LTQyLjMgNDIuNy01NC4yIDY3LjQtMTIuNyAyNi41LTE4LjQgNTIuNC0xOC41IDgzLjUgMCA0NC43IDExLjggODAuNSAzOC4zIDExNi4xIDcuNSAxMC4xIDIzLjUgMjYuNiAzNC40IDM1LjQgMjMuOSAxOS41IDU0LjggMzMuOCA4NC4xIDM4LjkgMTUgMi42IDQyIDMuNiA1Ny4zIDIgNTAuOC01LjMgOTQuMS0yOS4xIDEyOS40LTcxLjUgNDAuOC00OC45IDUzLjMtMTE5LjkgMzIuNC0xODIuOS04LjktMjYuNi0yMy4xLTQ5LjYtNDMuOC03MS0zOC4zLTM5LjUtODAuNS01OC4xLTEzNC42LTU5LjItOS45LS4yLTE5LjMtLjItMjEgLjFtNDIuNSAyNy45YzM0LjIgNC45IDY0LjkgMjAuNiA5MC44IDQ2LjQgMjUuNiAyNS41IDM5LjcgNTEuNyA0Ni45IDg3LjYgMi44IDE0LjEgMi41IDQ4LjItLjUgNjMuMy02LjcgMzMuNS0yMS4xIDYwLjEtNDUuNyA4NC44LTEzLjggMTMuOC0zMy41IDI3LjYtNTAgMzUtOS40IDQuMi0yNS4xIDktMzYgMTEtMTUuMyAyLjktNDkuOSAyLjctNjUtLjMtNDIuMS04LjYtNzkuOS0zMy43LTEwNC4zLTY5LjUtMjAtMjkuNC0yOC4yLTU2LjctMjguMy05My45IDAtMjQuMiAzLjgtNDQuOCAxMS45LTYzLjkgNy4xLTE2LjggMTIuNy0yNS45IDI1LjEtNDAuOSAyNy43LTMzLjYgNjIuMS01My42IDEwMi4xLTU5LjYgMTItMS44IDQwLjMtMS44IDUzIDAiLz4KICAgIDxwYXRoIGQ9Ik00OTYuNSAzNzQuN2MtMTQuMyAxLjYtMzQuMSA3LjktNDguMiAxNS4zLTQxLjkgMjEuOS03MC42IDY3LjQtNzEuNiAxMTMuNS0uMiAxMS44LjkgMTQuNSA3LjcgMTcuOSA0LjkgMi40IDkuNyAxLjUgMTQuMy0yLjggMy41LTMuMiAzLjYtMy41IDQuNC0xMy4yLjktMTIuNyAyLjQtMjAuNiA1LjQtMjkuOSAxOC44LTU3LjQgODEuMi04OC4yIDEzOC45LTY4LjYgNDEuMSAxNCA2OC40IDQ5LjUgNzIuNiA5NC4yIDEuMyAxMy45IDIuNyAxNy41IDggMjAuMSA0LjYgMi4zIDcuMyAyLjIgMTItLjIgNS41LTIuOCA3LTYuMiA3LTE2LjMgMC0xNS45LTQuOS0zNi40LTEyLjYtNTIuNi0xNC44LTMxLjMtNDEuNi01Ni40LTczLjMtNjguNi0xNi4zLTYuMy0yNy43LTguNi00NS4xLTktOC41LS4xLTE3LjMtLjEtMTkuNS4yIi8+CiAgICA8cGF0aCBjbGFzcz0idmFsdWUiIGQ9Ik01NDEuNCA0NDkuOWMtMS44IDEuMS0zLjUgMi40LTMuOCAzLS40LjYtNC45IDEyLjItMTAgMjUuOGwtOS40IDI0LjgtOS4zLjZjLTE1LjYgMS4xLTI2LjYgNi4zLTM2LjggMTcuNS0yNi4zIDI4LjctMTQuNCA3NC42IDIyLjYgODcuNSAyNS41IDguOCA1NC44LTQuMSA2Ni4yLTI5LjIgOS4zLTIwLjUgNS4xLTQzLjUtMTAuOC01OS44LTMuNi0zLjYtNi40LTcuMy02LjItOC4xLjEtLjggNC4zLTEyLjMgOS4yLTI1LjQgNC45LTEzLjIgOC45LTI0LjYgOC45LTI1LjQgMC0uOS0uOS0zLjUtMi01LjgtMy40LTctMTItOS41LTE4LjYtNS41bS0yMC4zIDgyLjJjNSAxLjcgMTEuNSA3LjQgMTQuNiAxMi43IDIuNCA0LjEgMi44IDUuOCAyLjggMTIuNyAwIDkuMS0xLjcgMTMuNy03LjIgMTkuMS02IDYtMTAuOCA3LjktMTkuOCA3LjgtOS40IDAtMTQuMS0yLTE5LjgtOC4zLTUtNS41LTYuOC0xMC40LTctMTguMi0uMy0xNS41IDEwLjktMjYuOCAyNi40LTI2LjkgMy42IDAgOC4xLjUgMTAgMS4xIi8+CiAgPC9nPgo8L3N2Zz4=);
}

.Icon.--volume { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTQgOWg0LjAwMkwxMiA1djE0Yy0yLjQ0Ni0yLjY2Ny0zLjc3OC00LTMuOTk4LTRINFY5em0xMCA0YTEgMSAwIDAgMCAwLTJWOWEzIDMgMCAwIDEgMCA2di0yem0wIDRhNSA1IDAgMCAwIDAtMTBWNWE3IDcgMCAwIDEgMCAxNHYtMnoiLz48L3N2Zz4K'); }

.PlayerUI.--muted .Icon.--volume,
.Icon.--muted { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTE4IDEwLjU4NGwtMi4yOTMtMi4yOTEtMS40MTQgMS40MTQgMi4yOTMgMi4yOTEtMi4yOTEgMi4yOTEgMS40MTQgMS40MTUgMi4yOTItMi4yOTIgMi4yOTQgMi4yOTIgMS40MTQtMS40MTUtMi4yOTMtMi4yOTEgMi4yOTEtMi4yOS0xLjQxNC0xLjQxNS0yLjI5MiAyLjI5MXpNNCA5aDQuMDAyTDEyIDV2MTRjLTIuNDQ2LTIuNjY3LTMuNzc4LTQtMy45OTgtNEg0Vjl6Ii8+PC9zdmc+Cg=='); }

.PlayerUI .__cue-title {
  font-size: 10px;
  margin-top: -2em;
}

.PlayerUI .__inner > button {
  --size: 40px;
  width: var(--size);
  height: var(--size);
  display: inline-block;
  background-color: transparent;
  border: 0;
  margin: 0;
  outline: none;

  cursor: pointer;
  border-radius: 12px;

  box-shadow: 0px 0px 0px 0px #80808033 inset;
  /* background-color: #f2f2f2; */
  transition: .4s all;

  filter: grayscale(1) brightness(10);
}
.PlayerUI .__inner > button:active {
  transform: translateY(-15px) scale(1.3);
}

.PlayerUI .__inner > button:focus {
  box-shadow: 0px 0px 0px 3px #80808033 inset;
}
.PlayerUI .__inner > button .Icon { margin-top: 2px; }

.PlayerUI .__time,
.PlayerUI .__duration {
  padding: 0 10px;
  font-size: 12px;
  width: 64px;
  margin-top: -2px;

  text-align: center;
  white-space: nowrap;
}

.PlayerUI .__seek {
  --h: 2px;
  --progress: 50%;
  position: relative;
  overflow: hidden;
  height: 50%;
  flex-grow: 100;
  /* position: relative;
  top: 10px; */

  display: flex;
  align-items: center;

  cursor: pointer;
  cursor: col-resize;
}

.PlayerUI .__seek::before {
  content: '';
  position: absolute;
  left: 0; width: 100%;
  top: calc(50% - var(--h) / 2);
  height: var(--h);
  background-color: #0003;
}

.PlayerUI .__seek::after {
  content: '';
  position: absolute;
  left: 0; width: var(--progress);
  top: calc(50% - var(--h) / 2);
  height: var(--h);
  background-color: #3602B0;
}

.PlayerUI .Popup--passive {
  position: absolute;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

.PlayerUI .__vert-slider {
  --value: 1;
  width: 24px;
  height: 128px;
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 4px 0 #0003;
  transition: opacity .2s;
}

.PlayerUI .__vert-slider::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0; right: 0;
  height: calc(100% * var(--value));
  background-color: #3602B0;
}
.PlayerUI .__volume {
  order: 99;
}
.PlayerUI .__volume-slider {
  right: 8px; bottom: 48px;
}

.PlayerUI .__speed {
  position: relative;
}
.PlayerUI .__speed-slider {
  /* right: 12px; bottom: 48px; */
  right: 8px; bottom: 40px;
}

.PlayerUI:not(.--muted) .__volume:hover + .__volume-slider,
.PlayerUI .__speed:hover .__speed-slider,
.PlayerUI .__vert-slider:hover {
  opacity: .8;
  pointer-events: auto;
}

.PlayerUI .__speed-slider {
  --value: .4285;
  position: absolute;
  z-index: 100;
}

.PlayerUI .__speed-slider::before {
  content: '';
  z-index: 2;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% * .4285);
  background-color: white;
  height: 1px;
}

.PlayerUI__cue {
  position: relative;
  cursor: pointer;
  text-decoration: none !important;
}
.PlayerUI__cue.--active::after {
  position: absolute;
  /* top: -1px; left: -3px; right: -6px; bottom: -4px; */
  inset: -4px;

  /* border-radius: 5px; */
  background: #3602b01c;
  content: '';
}
.PlayerUI__cue.--active + span { text-decoration: underline; }

@media (min-width: 481px) {
  .PlayerUI .__title {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .PlayerUI .__volume,
  .PlayerUI .__cue-title
    { display: none !important; }

  .PlayerUI .__inner {
    padding: 0 16px;
  }

  .PlayerUI .__time,
  .PlayerUI .__duration {
    font-size: 12px !important;
  }

  .PlayerUI .__time,
  .PlayerUI .__duration,
  .PlayerUI .__seek {
    display: none;
  }

  .PlayerUI .__title {
    order: -1;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    margin-top: -4px;
  }
}

@supports (--webkit-line-clamp: 2) {
  /* @media (max-width: 480px) */
    .PlayerUI .__title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: 3em;

      line-height: 1.4em;
      white-space: normal;
    }
  /* } */
}