.fn-radio-player {
  max-width: 907px;
  margin: 0 auto 1.25rem;
  overflow: hidden;
  background: linear-gradient(135deg, #65699a, #33375f);
  color: #fff;
  border: 1px solid #4f5278;
  box-shadow: 0 16px 42px rgb(35 37 73 / 22%);
}

.fn-radio-player__main {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}

.fn-radio-player__play {
  display: inline-grid;
  grid-template-columns: 42px auto;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgb(255 255 255 / 35%);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-weight: 700;
  padding: .55rem .75rem;
  cursor: pointer;
  min-width: 190px;
}

.fn-radio-player__play-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}

.fn-radio-player__play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #5f0057;
  transform: translate(-50%, -50%);
}

.fn-radio-player.is-playing .fn-radio-player__play-icon::after {
  width: 14px;
  height: 18px;
  border: 0;
  border-left: 5px solid #5f0057;
  border-right: 5px solid #5f0057;
}

.fn-radio-player__meta {
  min-width: 0;
}

.fn-radio-player__eyebrow,
.fn-radio-player__subtitle,
.fn-radio-player__track {
  margin: 0;
}

.fn-radio-player__eyebrow {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
}

.fn-radio-player h2 {
  margin: .1rem 0;
  color: #fff;
  font-size: 1.55rem;
}

.fn-radio-player__track {
  margin-top: .35rem;
  color: #ffe082;
  font-weight: 700;
}

.fn-radio-player__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .5rem 1rem;
  background: rgb(0 0 0 / 18%);
}

.fn-radio-player__bar label {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.fn-radio-player__bar input {
  width: 120px;
}

.fn-radio-player__history-wrap {
  padding: .85rem 1rem 1rem;
  background: rgb(255 255 255 / 8%);
}

.fn-radio-player__history-wrap h3 {
  margin: 0 0 .65rem;
  color: #fff;
  font-size: 1.05rem;
}

.fn-radio-player__history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .35rem .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fn-radio-player__history li {
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  gap: .5rem;
  font-size: .9rem;
}

.fn-radio-player__history time {
  opacity: .75;
}

.fn-radio-intro {
  max-width: 907px;
  margin: 0 auto 1rem;
  color: #4b4f70;
  font-weight: 700;
}

@media (max-width: 640px) {
  .fn-radio-player__main,
  .fn-radio-player__bar {
    display: block;
  }

  .fn-radio-player__play,
  .fn-radio-player__meta,
  .fn-radio-player__bar label {
    margin-top: .75rem;
  }
}