

/* New-template base (formerly main26.css) */
:where(.arena-new27) *,
:where(.arena-new27) *::before,
:where(.arena-new27) *::after {
box-sizing: border-box;
}

html:where(.arena-new27) {
scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

:where(.arena-new27) body {
width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

:where(.arena-new27) #loader {
position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

:where(.arena-new27) #loader img {
border-radius: 28px;
}

:where(.arena-new27) #loader.fade-out {
opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

:where(.arena-new27) #back_cover {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
}

:where(.arena-new27) #back_cover::before {
content: "";
  position: absolute;
  inset: 0;
  background: center / cover no-repeat var(--cover-image);
  opacity: 0;
  transition: opacity 1s ease;
}

:where(.arena-new27) #back_cover.is-loaded::before {
opacity: 1;
}

:where(.arena-new27) #back_cover.no-fade::before {
opacity: 1;
  transition: none;
}

:where(.arena-new27) #radioheart-player {
margin-top: 50px;
}

:where(.arena-new27) #background {
position: absolute;
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background: url() no-repeat scroll center top transparent;
  background-size: 1400px;
  object-fit: none;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
  animation: show 12s linear -6s;
}

:where(.arena-new27) #background img {
width: 1800px;
  max-width: 1800px;
  margin: 0 auto;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

:where(.arena-new27) #styles {
width: 100%;
  height: 58px;
  text-align: center;
}

:where(.arena-new27) #styles a {
margin: 6px;
  padding: 8px 16px;
  background: rgba(25, 25, 25, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.60);
  font-family: Manrope;
  font-size: 16px;
}

:where(.arena-new27) #styles a:hover {
background: rgba(25, 25, 25, 1);
  color: rgba(255, 255, 255, 0.8);
  transition: filter 0.3s ease;
}

:where(.arena-new27) #music_chips {
display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  --chip-bg: rgba(12, 12, 12, 0.80);
  z-index: 20;
  position: relative;
}

:where(.arena-new27) #music_chips .chip {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px 8px 10px;
  border-radius: 100px;
  background: var(--chip-bg);
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.18px;
  color: #fff;
  border: 1px solid rgba(62, 62, 62, 0.60);
  transition: background 0.25s ease, color 0.25s ease;
}

:where(.arena-new27) #music_chips .chip:hover {
background: #fff;
  color: #000;
}

:where(.arena-new27) #music_chips .avatars {
display: flex;
}

:where(.arena-new27) #music_chips .avatars img {
height: 26px;
  object-fit: cover;
}

:where(.arena-new27) #music_chips .avatars img + img {
margin-left: -8px;
}

:where(.arena-new27) #trackid {
width: 400px !important;
}

:where(.arena-new27) #fixedcontent {
position: fixed;
  width: 100%;
  padding: 12px;
}

:where(.arena-new27) #starter {
height: 460px;
}

:where(.arena-new27) #headcarousel {
display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  color: #fff;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: transform 0.6s ease;
  will-change: transform;
  grid-column: 1 / -1;
}

:where(.arena-new27) .carblock {
width: calc((100% - 72px) / 4);
  flex: 0 0 calc((100% - 72px) / 4);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

:where(.arena-new27) .carblock img {
width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

:where(.arena-new27) .num2,
:where(.arena-new27) .num4 {
border: 1px solid rgba(62, 62, 62, 0.60);
  border-radius: 24px;
}

:where(.arena-new27) .num3 {
border-radius: 100%;
}

:where(.arena-new27) #mainfeed {
width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  background: #000;
  opacity: 1 !important;
  transition: background 0.3s ease;
}

:where(.arena-new27) #mainfeed.feed-ready {
opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
}

:where(.arena-new27) .feed-item {
position: relative;
  width: 100%;
  min-width: 0;
}

:where(.arena-new27) #mainfeed > .feed-item {
width: 100%;
  min-width: 0;
}

:where(.arena-new27) #mainfeed > .feed-item.feed-authors {
grid-column: 1 / -1;
}

:where(.arena-new27) .feed-link {
display: block;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

:where(.arena-new27) .feed {
position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  min-width: 0;
  min-height: 600px;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(200, 200, 200, 0.08);
  color: #fff;
  background: rgba(20, 20, 20, 0.80);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: transform 0.6s ease;
  will-change: transform;
}

:where(.arena-new27) .feed::before {
content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: var(--feed-bg) center / cover no-repeat;
  opacity: 0.4;
  z-index: -1;
}

:where(.arena-new27) .feed:hover {
transform: scale(1.03);
}

:where(.arena-new27) .feed:first-child {
scroll-snap-stop: normal;
}

:where(.arena-new27) .feed h1 {
margin-top: 4px;
  color: #fff;
  font-family: "LINE Seed JP", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
}

:where(.arena-new27) .feed-item::after {
display: none;
}

:where(.arena-new27) .feed-item svg {
position: absolute;
  left: 50%;
  top: calc(100% + 40px);
  transform: translateX(-50%);
  height: 100px;
  pointer-events: none;
  z-index: 3;
}

:where(.arena-new27) .feed-divider {
scroll-snap-align: none;
  display: contents;
}

:where(.arena-new27) #artists {
width: 100%;
  min-width: 0;
}

:where(.arena-new27) .feed-authors {
scroll-snap-align: none;
  scroll-snap-stop: normal;
}

:where(.arena-new27) .feed-authors .feed {
scroll-snap-align: none;
  scroll-snap-stop: normal;
}

:where(.arena-new27) .top_author {
display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

:where(.arena-new27) .top_author img {
max-width: 68px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

:where(.arena-new27) .top_info {
display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

:where(.arena-new27) .top_info h2 {
margin: 0;
  color: #FFF;
  font-family: Manrope;
  font-size: 20px;
  font-weight: 600;
  line-height: 100%;
}

:where(.arena-new27) .top_tags {
display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

:where(.arena-new27) .top_tags div {
display: flex;
  padding: 6px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.10);
  color: #FFF;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

:where(.arena-new27) .top_date {
display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: 1 0 0;
  min-width: 0;
}

:where(.arena-new27) .date {
color: rgba(255, 255, 255, 0.40);
  font-family: Manrope;
  font-size: 46px;
  font-weight: 500;
  line-height: 100%;
}

:where(.arena-new27) .dateinfo {
color: rgba(255, 255, 255, 0.40);
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

:where(.arena-new27) .center_text {
max-width: 500px;
  color: #FFF;
  text-align: center;
  font-family: Manrope;
  font-size: 18px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.2px;
}

:where(.arena-new27) .bottom_player {
position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.40);
  text-align: right;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  line-height: 100%;
}

:where(.arena-new27) .bottom_time {
position: absolute;
  left: 50%;
  top: 23px;
  transform: translateX(-50%);
}

:where(.arena-new27) .listeners img {
margin-left: 6px;
}

:where(.arena-new27) #promoya {
display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-width: 0;
}

:where(.arena-new27) #promotag {
position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.40);
  font-family: Manrope;
  font-size: 12px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}

:where(.arena-new27) #yandex_rtb_R-A-13604440-2 {
width: 100%;
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:where(.arena-new27) #today {
display: flex;
  flex-wrap: wrap;
  width: 96%;
  max-width: 1600px;
  margin: 0 auto 24px;
  padding: 24px;
  background: rgba(40, 40, 40, 0.40);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  color: #fff;
  font-family: sans-serif;
}

:where(.arena-new27) #todaystart {
display: flex;
  width: 100%;
  gap: 24px;
}

:where(.arena-new27) #today1 {
flex: 0 0 40%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  background: url();
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

:where(.arena-new27) #today2 {
flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

:where(.arena-new27) #today3 {
display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  margin-top: 24px;
}

:where(.arena-new27) #tblock {
width: calc(33.3% - 16px);
}

:where(.arena-new27) #tblock h2,
:where(.arena-new27) #tblockf h2 {
margin-top: 6px;
  color: #fff;
  font-size: 16pt;
  font-weight: 550;
  line-height: 28px;
}

:where(.arena-new27) #tblock b {
font-weight: 450 !important;
  color: #95979F;
}

:where(.arena-new27) #tblock img,
:where(.arena-new27) #tblockf img {
width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

:where(.arena-new27) #tblock img {
filter: grayscale(20%) brightness(80%);
  transition: filter 0.3s ease;
}

:where(.arena-new27) #tblock img:hover {
filter: grayscale(0%) brightness(100%);
}

:where(.arena-new27) #tblock:nth-child(odd) {
padding-left: 0;
}

:where(.arena-new27) #tblock:nth-child(2n) {
padding-right: 0;
}

:where(.arena-new27) #tblockf {
width: calc(25% - 18px);
}

:where(.arena-new27) .zagtest {
width: 100%;
  margin-bottom: 24px;
  color: #FFF;
  font-family: Manrope;
  font-size: 24px;
  font-weight: 600;
  line-height: 100%;
  text-align: left;
}

:where(.arena-new27) #briefdiv {
display: grid;
  align-items: flex-start;
  align-content: flex-start;
  gap: 24px;
  align-self: stretch;
  flex-wrap: wrap;
  margin-bottom: 24px;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 750px) {
:where(.arena-new27) #briefdiv {
grid-template-columns: 1fr;
}
}

:where(.arena-new27) .blockbutton {
position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(180deg, #373737 0%, #313131 100%);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  text-align: center;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.2px;
  transition: color .25s ease, border-color .25s ease;
}

:where(.arena-new27) .blockbutton::before {
content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 0;
}

:where(.arena-new27) .blockbutton > * {
position: relative;
  z-index: 1;
}

:where(.arena-new27) .blockbutton:hover::before {
opacity: 1;
}

:where(.arena-new27) .blockbutton:hover {
color: #000;
  border-color: #fff;
}

:where(.arena-new27) .blockbutton span {
width: 100%;
  text-align: center;
}

:where(.arena-new27) .sicon {
width: 32px;
}

:where(.arena-new27) .brief {
display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 0;
  min-width: 0;
}

:where(.arena-new27) .briefbig {
display: flex;
  height: 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

:where(.arena-new27) .brief img {
width: 64px;
  border-radius: 12px;
}

:where(.arena-new27) .briefinfo {
display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
}

:where(.arena-new27) .briefname {
color: #FFF;
  font-family: Manrope;
  font-size: 18px;
  font-weight: 600;
  line-height: 100%;
}

:where(.arena-new27) .briefcase {
color: #8B8B8B;
  font-family: Manrope;
  font-size: 16px;
  font-weight: 600;
  line-height: 120%;
}

:where(.arena-new27) .divider {
border: none;
  height: 1px;
  margin-top: 32px;
  margin-bottom: 32px;
  background: rgba(255, 255, 255, 0.10);
}

:where(.arena-new27) #briefwave {
display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 0;
  min-width: 0;
}

:where(.arena-new27) #briefwave > a {
display: block;
  flex: 1 1 0;
  min-width: 0;
}

:where(.arena-new27) #briefwave .briefcover {
position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(62, 62, 62, 0.30);
  box-sizing: border-box;
}

:where(.arena-new27) #briefwave .briefcover img {
display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
}

:where(.arena-new27) #briefwave .briefcover img.is-loaded {
opacity: 1;
}

:where(.arena-new27) #briefwave img.is-loaded {
opacity: 1;
}

:where(.arena-new27) #contentfree {
width: 96%;
  max-width: 1600px;
  display: none !important;
}

:where(.arena-new27) #content_podcast {
width: 96% !important;
  max-width: 1600px;
}

:where(.arena-new27) #content_podcast img {
filter: grayscale(20%) brightness(86%);
  transition: filter 0.3s ease;
}

:where(.arena-new27) #content_podcast img:hover {
filter: grayscale(0%) brightness(100%);
}

:where(.arena-new27) #feed_ads {
width: 96% !important;
  max-width: 1600px;
  min-height: 200px;
  margin: 0 auto 24px;
  padding: 28px;
  overflow: auto;
  background: rgba(40, 40, 40, 0.40);
  backdrop-filter: blur(30px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

:where(.arena-new27) #promo {
display: none;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
  margin-bottom: 24px;
  font-family: sans-serif;
  color: #fff;
}

:where(.arena-new27) .promoblock {
flex: 1 1 calc(33.333% - 16px);
  min-width: 260px;
  display: flex;
  gap: 24px;
  padding: 16px;
  background: rgba(25, 25, 25, 1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 24px;
}

:where(.arena-new27) .promoimg {
flex: 0 0 128px;
}

:where(.arena-new27) .promoimg img {
width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

:where(.arena-new27) .promotext {
flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

:where(.arena-new27) .ptitle {
margin: 0;
  font-size: 16pt;
  font-weight: 600;
  line-height: 1.6;
}

:where(.arena-new27) .poption {
margin: 0;
  color: #ccc;
  font-size: 12pt;
  line-height: 1.6;
}

@media (max-width: 900px) {
:where(.arena-new27) .promoblock {
flex: 1 1 calc(50% - 12px);
}
}

@media (min-width: 600px) {
:where(.arena-new27) #maincontent {
display: none
}
}

@media (max-width: 600px) {
html:where(.arena-new27),
:where(.arena-new27) body {
width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

:where(.arena-new27) body {
margin: 0;
}

:where(.arena-new27) #mobilemenu {
display: none;
}

:where(.arena-new27) #music_chips {
display: none !important;
}

:where(.arena-new27) #back_cover {
display: none !important;
}

:where(.arena-new27) #maincontent {
display: flex;
}

:where(.arena-new27) #mainhead {
width: 100%;
    overflow-y: hidden;
}

:where(.arena-new27) #fixedcontent {
width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

:where(.arena-new27) #starter {
height: 400px;
}

:where(.arena-new27) #headcarousel {
width: 100%;
    max-width: 100%;
    gap: 16px;
    margin: 40px auto;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
}

:where(.arena-new27) .carblock {
width: calc((100% - 48px) / 4);
    flex: 0 0 calc((100% - 48px) / 4);
}

:where(.arena-new27) #mainfeed {
display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 16px !important;
    gap: 0px !important;
    overflow-x: hidden !important;
}

@media (max-width: 600px) {
:where(.arena-new27) #mainfeed {
padding: 0 0 !important;
}

:where(.arena-new27) .briefname {
color: #FFF;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 600;
    line-height: 100%;
}
}

:where(.arena-new27) #mainfeed > .feed-item {
grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

:where(.arena-new27) #mainfeed > .feed-item > .feed,
:where(.arena-new27) #mainfeed > .feed-item > .feed-link {
width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

:where(.arena-new27) .feed #artists {
padding: 0 0 0 12px !important;
}

:where(.arena-new27) .feed {
padding: 16px !important;
    min-height: 450px !important;
}

:where(.arena-new27) .feed:hover {
transform: none;
}

:where(.arena-new27) #artists {
width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    align-items: normal;
}

:where(.arena-new27) #artists.feed {
min-height: auto !important;
    height: auto !important;
    border: 0; 
    background: rgba(0, 0, 0, 0);
}

:where(.arena-new27) #today {
display: none;
}

:where(.arena-new27) #feed_ads {
width: 100% !important;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}

:where(.arena-new27) .promoblock {
flex: 1 1 100%;
}

:where(.arena-new27) #briefdiv {
display: grid;
    margin-bottom: 12px;
}

:where(.arena-new27) #RTWidgetStatus table {
width: 350px !important;
    max-width: 100%;
    margin: 0 auto;
}

:where(.arena-new27) .top_author {
justify-content: flex-start;
    gap: 12px;
}

:where(.arena-new27) .top_author img {
display: none;
}

:where(.arena-new27) .top_info {
gap: 6px !important;
}

:where(.arena-new27) .top_info h2 {
font-size: 18px !important;
}

:where(.arena-new27) .top_tags div {
font-size: 14px !important;
}

:where(.arena-new27) .top_date {
min-width: 80px;
    align-self: flex-start;
}

:where(.arena-new27) .date {
font-size: 32px !important;
}

:where(.arena-new27) .dateinfo {
font-size: 14px !important;
}

:where(.arena-new27) .center_text {
font-size: 16px !important;
}

:where(.arena-new27) #briefwave {
display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    overflow-x: auto;
    max-width: 100%;
}

:where(.arena-new27) #briefwave > a {
flex: 0 0 140px;
}

:where(.arena-new27) #briefwave img {
width: 100%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 12px;
}

:where(.arena-new27) .briefbig {
display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
}

:where(.arena-new27) .briefcase {
color: #8B8B8B;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 120%;
}
}

/* Existing shared typography and site components */
@keyframes show {
from {opacity: 0;} 80% {opacity: 0;} to {opacity: 1;}
}

header {
width: 100%; margin: 0 auto; top: -10px; position: fixed; left: 50%; transform: translate(-50%, -50%); z-index: 9999;
}

#logomenus {
width: 100%; height: 32px; padding-top: 32px; text-align: center; display: block;
}

#logomenus img {
height: 28px;
}

#menu {
width: 100%;
 height: 52px;
 max-width: none;
 left: 0;
 transform: none;
 margin-top: 70px;
 background: rgba(19, 19, 19, 0.8);
 backdrop-filter: blur(20px);
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 z-index: 999;
 transition: background 0.3s ease, backdrop-filter 0.3s ease, margin-top 0.3s ease;
}

#menu div {
float: left;
}

#amb1 {
width: 20%; text-align: left; box-sizing: border-box;
}

#amb1 img {
height: 24px; margin-top: 14px; margin-left: 24px;
}

#amb2 {
width: 60%; text-align: center; margin-top: 16px; box-sizing: border-box;
}

#amb2 a {
color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 15px; font-style: normal; font-weight: 500; line-height: 20px; margin: 6px;
}

#amb2 a:hover {
color: rgba(255, 255, 255, 0.80);
}

#amb3 {
width: 20%; text-align: right; margin-top: 11px; padding-right: 24px; box-sizing: border-box; color: inherit; background: rgba(255, 255, 255, 0.00);
}

#amb3 a {
color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 15px; font-style: normal; font-weight: 500; line-height: 18px; margin: 6px;
}

#amb3 a:hover {
color: rgba(255, 255, 255, 0.80);
}

@media screen and (max-width: 599px) {
#menu {
display: none;
}

#amb1 {
display: none;
}

#amb2 {
width: 100%
}

#amb3 {
display: none;
}

#menu.scrolled {
margin-top: 30px;
}
}

@media (min-width: 599px) {
#logomenus {
display: none;
}
}

#logo {
background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border-radius: 12px; height: 48px; width: 178px; padding: 10px 12px 10px 10px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08);
}

#logo img {
height: 24px;
}

#mobilemenu {
text-align: center;
 width: 100%;
 height: 60px;
 max-width: none;
 left: 0;
 transform: none;
 margin-top: 10px;
 background: rgba(19, 19, 19, 0.8);
 backdrop-filter: blur(20px);
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 position: fixed;
 bottom: 0;
 justify-content: center; 
 display: flex;
 gap: 12%; 
z-index: 9999;
}

#mobilemenu img {
height: 28px; margin-top: 14px; opacity: 0.4;
}

#mobilemenu img:hover {
opacity: 0.8; transition: filter 0.3s ease;
}

.activeicon {
opacity: 1 !important;
}

@media (min-width: 600px) {
#mobilemenu {
display: none;
}

#logomenus {
display: none;
}
}

@media (max-width: 599px) {
#adminmenu {
display: none;
}

#start {
height: 60px;
}
}

#pages {
background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; height: 48px; width: 280px; text-align: center; padding-top: 12px;
}

#pages a {
padding: 6px; color: #95979F; font-family: Manrope; font-weight: 500; font-size: 12pt;
}

.active {
text-decoration: none; color: #fff !important; border-bottom: 2px solid rgba(255, 255, 255, 1); padding: 0 !important; padding-bottom: 13px !important; margin: 6px;
}

#telegram {
background: rgba(25, 25, 25, 0.80); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; height: 48px; width: 178px; text-align: left; overflow: hidden;
}

#telegram a {
padding: 6px; color: #fff; font-family: Manrope; font-weight: 500; font-size: 12pt;
}

#mainhead {
text-align: center; height: 400px; color: #fff; animation: show 2.5s; animation-timing-function: linear;  animation-delay: -1s;
}

#track {
float: left; width: 50%;
}

#radiostat {
margin: 0 auto; width: 100%; font-family: Manrope; font-weight: 500; font-size: 20pt; line-height: 40px; margin-top: 16px; margin-bottom: 12px; letter-spacing: 0.005em; color: #000; text-align: center;
}

#live {
float: left; width: 40%;
}

#liveinfo {
font-family: Manrope; font-weight: 500; font-size: 30pt; line-height: 46px; margin-top: 8px; letter-spacing: 0.005em; color: #000;
}

#fixedplay {
position: fixed; bottom: 50px; width: auto; height: 40px; border-radius: 100px; box-sizing: border-box; text-align: center; float: left; display: inline-block; left: 50%; transform: translate(-50%);
}

#fixedplay img {
padding: 10px;
}

#startplay {
width: 100%; height: 500px; text-align: center; background: #141414;
}

body {
margin: 0 auto; background: #000 url() no-repeat; background-attachment: fixed; background-size: 100%;
}

#content {
width: 90%; margin: 0 auto; max-width: 1600px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 15, 15, 0.80); padding: 12px; border-radius: 24px; overflow: auto;
}

#content_page {
width: 90%; margin: 0 auto; max-width: 1600px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 15, 15, 0.80); border-radius: 16px; overflow: auto; color: #fff; margin-top: 24px;
}

#styles {
text-align: center; width: 100%; height: 58px;
}

#styles a {
margin: 3px; padding: 8px 16px 8px 16px; background: rgba(25, 25, 25, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 24px; color: rgba(255, 255, 255, 0.60); font-family: Manrope; font-size: 16px;
}

#styles a:hover {
background: rgba(25, 25, 25, 1); color: rgba(255, 255, 255, 0.8); transition: filter 0.3s ease;
}

#content_podcast {
width: calc(90%); margin: 0 auto; max-width: 1600px; overflow: auto; background: rgba(40, 40, 40, 0.40); backdrop-filter: blur(30px); padding: 12px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 24px;
}

#contentfree {
width: 90%; margin: 0 auto; max-width: 1600px; overflow: auto; display: flex; align-items: center; gap: 24px; margin-bottom: 32px
}

#podcast {
float: left; width: 25%; min-height: 280px; height: auto; overflow: auto; padding: 12px; display: block;
}

#podcastposter {
height:0; width:100% ;padding-bottom: 100%;; background: rgba(255, 255, 255, 0.03); border-radius: 16px; margin-bottom: 12px;
}

#podcastposter img {
display: block
}

#freeb {
background: rgba(40, 40, 40, 0.40); backdrop-filter: blur(30px); float: left; width: 33.3%; padding: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08);
}

#freeb div {
float: left; margin-right: 24px; color: #fff; overflow-wrap: normal; max-width: 264px;
}

#freeb img {
width: 128px; border-radius: 12px; display: block;
}

#oblozinfo {
max-width: 400px; overflow-wrap: normal;
}

.ptitle {
width: 100%; max-width: 400px; font-family: Manrope; font-weight: 600; font-size: 16pt; line-height: 28px; margin-top: 6px; color: #fff;
}

.ptitle_w {
width: 100%; max-width: 400px; font-family: Manrope; font-weight: 600; font-size: 16pt; line-height: 28px; margin-top: 6px; color: #fff;
}

.poption {
width: 100%; min-height: 64px; font-family: Manrope; font-weight: 500; font-size: 12pt; line-height: 24px; color: #B5B5B5; margin-top: 4px; letter-spacing: 0.01em;
}

#podcast img {
width: 100%; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08);
}

.nota {
opacity: 0.4;
}

#freebigb {
background: rgba(20, 20, 20, 0.40); backdrop-filter: blur(30px); float: left; width: 50%; padding: 24px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; display: none;
}

.play1 {
background: rgba(30, 30, 30, 0.40) url(/images/nov_select.png) no-repeat 50% !important; background-attachment: fixed; background-size: 100% 100%; min-height: 500px; text-color: #fff; display: none;
}

.play2 {
background: rgba(30, 30, 30, 0.40)  url(https://storage.arenaradio.ru/podcastlist/bigblock_2.png) no-repeat 50% !important; background-attachment: fixed; background-size: 100%; min-height: 500px; color: #fff; display: none;
}

#bigh1 {
width: 90%; margin: 0 auto; max-width: 1600px; font-family: Manrope; font-weight: 800; font-size: 80pt; line-height: 120px; color: #fff; padding-top: 64px; padding-bottom: 64px; text-transform: uppercase;
}

#bigh1 p {
width: 100%;
}

#footer {
width: 90%; margin: 0 auto; max-width: 1600px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 12px; margin-top: 48px; border-radius: 0; overflow: auto; margin-bottom: 64px; padding: 6px; color: #95979F; font-family: Manrope; font-weight: 500; font-size: 12pt;
}

#footer div {
width: 25%; float: left; color: #fff; padding-top: 36px; padding-right: 36px; overflow: hidden;
}

#footer div a {
display: block; width: 600px; padding-top: 6px; color: rgba(255, 255, 255, 0.60);
}

#footer img {
max-width: 158px; padding-top: 4px; padding-bottom: 12px;
}

#podcastlist {
width: 100%; overflow: auto;
}

#pod_list {
width: 100%; margin-bottom: 24px;
}

#pod_list div {
float: left; width: auto; max-width: 220px; color: #fff; padding-right: 16px;
}

#pod_list img {
border-radius: 12px;
}

hr {
width: 100%; border-color: #ffffff14; border-width: 0.5px; border-style: solid; margin-top: 20px; margin-bottom: 20px;
}

@media screen and (max-width: 1240px) {
#podcast {
width: 33.3%;
}
}

@media screen and (max-width: 600px) {
#trackid {
width: auto !important;
}

header {
margin: 0 auto; top: 0; padding-top: 32px; padding: 0; position: fixed; left: 50%; transform: translate(-50%, -50%); z-index: 9999;
}

#menublocks {
width: 94%; margin: 0 auto; overflow: auto; display: flex; justify-content: space-between; align-items: center; border-radius: 12px; margin-top: 72px;
}

#menublocks div {
float: left; padding: auto; color: #fff; margin-top: 0;
}

#logo {
display: none
}

#pages {
width: 280px; text-align: center;
}

#pages a {
padding: 6px; color: #fff; font-family: Manrope; font-weight: 500; font-size: 12pt;
}

#telegram {
display: none
}

#mainhead {
text-align: center; height: 400px;  color: #fff;
}

#content_podcast {
width: 94%; padding: 0px; margin-bottom: 12px;
}

#content {
width: 96%; padding: 6px;
}

#contentfree {
width: 100%; margin: 0 auto; overflow: hidden; display: block; margin-bottom: 16px; box-sizing: border-box;
}

#content_page {
width: 96%; margin: 0 auto;
}

#freeb {
float: left; width: 94%; padding: 12px; margin: 12px; border-radius: 24px; overflow: hidden; box-sizing: border-box; margin-bottom: 6px;
}

#freebigb {
width: 100%; margin: 0 auto;
}

#freeb div {
float: left; margin-right: 24px; color: #fff; overflow-wrap: normal; max-width: 180px;
}

#freeb img {
width: 100px; border-radius: 8px;
}

#podcast {
float: left; width: 50%; height: 250px !important; overflow: hidden; padding: 12px; display: block;
}

.ptitle {
font-size: 12pt; line-height: 20px;
}

.poption {
font-size: 10pt; line-height: 18px;
}

#bigh1 {
width: 96%; margin: 0 auto; font-family: Manrope; font-weight: 800; font-size: 32pt; line-height: 48px; color: #fff; padding: 6px; padding-top: 16px; padding-bottom: 24px; text-transform: uppercase;
}

#bigh1 p {
width: 100%;
}

#footer {
width: 96%; margin: 0 auto; padding: 6px; padding-top: 24px; overflow: hidden; padding-bottom: 32px;
}

#footer div {
width: 100%; float: left; color: #fff; padding-bottom: 16px;
}

#footer div a {
display: block; width: 600px; padding-top: 6px; color: rgba(255, 255, 255, 0.60);
}

#footer img {
max-width: 150px; padding-top: 4px; padding-bottom: 12px;
}
}

::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #000;
}

::-webkit-scrollbar-thumb {
background: #333;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
background: #555;
}

html {
scrollbar-color: #333 #000;
  scrollbar-width: thin;
}

.bottom-info-wrapper {
bottom: 0;
    color: #fff;
    font: 1.1em / 1.5 sans-serif;
    left: 0;
    margin: 0;
    position: fixed;
    right: 0;
    z-index: 999999;
    width: 100%;
    border-radius: 16px 16px 0 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1000px;
    border: 1px solid rgba(200, 200, 200, 0.08);
    background: rgba(40, 40, 40, 0.80);
    backdrop-filter: blur(30px);
}

/* Site header 1 */
#profile_info {
margin-top: -20px;
}

#profile_img {
padding-top: -10px;
}

#profile_text {
padding-top: 10px;
}

.nick {
width: 98px; float: left; margin-left: 22px; margin-top: 12px; color: #95979F; font-family: Manrope; font-weight: 500; font-size: 12pt;
}

.ava {
width: 48px; float: left;
}

/* Site header 2 */
#logo_left {
position: fixed;
 z-index: 9999;
 margin-left: 32px;
 min-width: 170px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(24, 24, 24, 0.70);
 border-radius: 100px;
 margin-top: -56px;
 backdrop-filter: blur(20px);
 position: fixed;
 border: 1px solid rgba(62, 62, 62, 0.30);
 transition: background 0.25s ease, color 0.25s ease;
}

#logo_left:hover {
background: #FF015D;
}

#header_center {
position: fixed;
 left: 50%;
 transform: translateX(-50%);
 z-index: 9999;
 min-width: 303px;
 height: 44px;
 display: none;
 align-items: center;
 justify-content: center;
 gap: 10px;
 background: rgba(24, 24, 24, 0.70);
 border-radius: 100px;
 margin-top: -56px;
 backdrop-filter: blur(20px);
 padding-left: 5px;
 padding-right: 5px;
 border: 1px solid rgba(62, 62, 62, 0.30);
 position: fixed;
}

#header_center .hover-bg {
position: absolute;
}

#header_center a {
position: relative;
 z-index: 2;
 display: inline-block;
 padding: 8px 13px;
 text-decoration: none;
 border-radius: 100px;
 color: rgba(255, 255, 255, 0.80);
 font-family: Manrope;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: 18px;
 letter-spacing: 0.18px; 
 transition: color 1s ease;
}

#header_center a::before {
content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 100%);
 opacity: 0;
 transition: opacity 1s ease;
}

#header_center a:hover::before {
opacity: 1;
}

#header_center a:hover {
color: rgba(255,255,255,1);
 transition: color 1s ease;
}

#header_center.ready .hover-bg {
transition: transform .3s ease, width .3s ease;
}

.hover-bg {
position: absolute;
 top: 5px;
 left: 0;
 height: calc(100% - 10px);
 background: #fff;
 border-radius: 100px;
 z-index: 1;
 transition: transform .25s ease, width .25s ease;
}

.has-bg {
color: #000 !important;
}

#user_right {
position: fixed;
 top: 0; 
 right: 32px;
 z-index: 9999;
 min-width: 100px;
 height: 44px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(24, 24, 24, 0.70);
 border-radius: 100px;
 top: 24px; 
 backdrop-filter: blur(20px);
 border: 1px solid rgba(62, 62, 62, 0.30);
 color: rgba(255, 255, 255, 0.80);
 text-align: center;
 font-family: Manrope;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: 18px;
 letter-spacing: 0.18px;
 transition: background 0.2s ease;
 padding-left: 16px;
}

#user_right img {
width: 32px;
 border-radius: 100px;
 margin: 0px 6px 0px 10px;
}

.subbadge {
margin: 0px -16px -2px 10px !important;
}

#user_right:hover {
background: rgba(32, 32, 32, 1);
}

#user_right a {
position: relative;
 z-index: 2;
 display: inline-block;
 padding: 8px 13px;
 text-decoration: none;
 border-radius: 100px;
 color: rgba(255, 255, 255, 0.80);
 font-family: Manrope;
 font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: 18px;
 letter-spacing: 0.18px; 
 transition: color 1s ease;
}

#user_right a::before {
content: "";
 position: absolute;
 inset: 0;
 background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.00) 100%);
 opacity: 0;
 transition: opacity 1s ease;
}

#user_right a:hover::before {
opacity: 1;
}

#user_right a:hover {
color: rgba(255,255,255,1);
 transition: color 1s ease;
}

#user_right.ready .hover-bg {
transition: transform .3s ease, width .3s ease;
}

.activelink {
background: #fff;
 border-radius: 100px;
 color: #000 !important;
}

/* Site header 3 */
#mobileheader {
display: none;
}

@media (max-width: 600px) {
#header_center {
display: none;
}

#logo_left {
display: none;
}

#user_right {
display: none;
}

#mobileheader {
display: inline-block !important;
 width: 100%;
 height: 32px;
 position: fixed;
 text-align: center;
 z-index: 999;
 top: 12px;
 left: 0;
 transform: translateY(0);
 transition: transform 0.6s ease;
}
}

#mobileheader.is-hidden {
transform: translateY(-130px);
}

/* Homepage legacy player visibility */
html[data-arena-template="home"] #liveplayer {
display: none !important;
}

/* Sidebar tabs */
.sidebar-menu {
display: flex;
 flex-direction: column;
 gap: 18px;
}

.menu-item {
display: flex;
 align-items: center;
 gap: 16px;
 min-height: 24px;
 color: inherit;
 text-decoration: none;
 opacity: 0.6;
}

.menu-item-selection {
display: flex;
 align-items: center;
 gap: 16px;
 min-height: 24px;
 color: inherit;
 text-decoration: none;
 opacity: 1.0;
}

.menu-icon,
.menu-item img {
width: 24px;
 height: 24px;
 flex: 0 0 24px;
}

.menu-icon {
display: grid;
 place-items: center;
 font-size: 22px;
}

#leftcontent .sidebar-menu > a img {
border-radius: 6px;
 object-fit: cover;
}

.menu-text {
display: flex;
 flex-direction: column;
 gap: 4px;
}

.menu-text b {
font-size: 15px;
 font-style: normal;
 font-weight: 500;
 line-height: 18px;
 letter-spacing: 0.18px;
}

.menu-text small {
color: #8b8b8b;
 font-size: 15px;
 font-weight: 600;
 line-height: 1.2;
}

.menu-text i {
color: #ff015d;
 font-style: normal;
}

#leftcontent hr {
height: 1px;
 margin: 36px 0;
 border: 0;
 background: rgba(255, 255, 255, 0.2);
}

/* Shared sidebar interaction; no layout shift on hover. */
#leftcontent .sidebar-menu > a {
  transition: opacity 180ms ease, transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #leftcontent .sidebar-menu > a:hover {
    opacity: 1;
    transform: translateX(4px);
  }
}

#leftcontent .sidebar-menu > a:focus-visible {
  opacity: 1;
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 6px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #leftcontent .sidebar-menu > a {
    transition: none;
  }

  #leftcontent .sidebar-menu > a:hover {
    transform: none;
  }
}

/* Sidebar typography */
#leftcontent {
box-sizing: border-box;
  padding-left: 0;
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
}

/* Collections, mood cards and cover cards */
.collection {
margin-bottom: 60px;
}

.section-title {
display: flex;
 align-items: center;
 gap: 24px;
 padding: 24px 0 48px;
}

.section-title h2 {
margin: 0;
 color: #fff;
 font-family: Manrope, Arial, sans-serif;
 font-size: 24px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.5px;
 white-space: nowrap;
}

.section-title__line {
flex: 1;
 height: 1px;
 background: rgba(255, 255, 255, 0.2);
}

.mood-list {
display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 36px;
 width: 100%;
}

@container (max-width: 947px) {
.mood-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@container (max-width: 623px) {
.mood-list {
grid-template-columns: 1fr;
}
}

.mood-card {
display: flex;
 align-items: center;
 gap: 16px;
 min-width: 0;
 color: #fff;
 text-decoration: none;
}

.mood-card img {
width: 66px;
 height: 66px;
 flex: 0 0 66px;
 border-radius: 12px;
 object-fit: cover;
}

.mood-card__text {
display: flex;
 flex: 1;
 flex-direction: column;
 gap: 8px;
 min-width: 0;
 overflow: hidden;
 font-family: Manrope, Arial, sans-serif;
}

.mood-card__text b,
.mood-card__text small {
overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.mood-card__text b {
color: #fff;
 font-size: 18px;
 font-weight: 600;
 line-height: 1;
}

.mood-card__text small {
color: #8b8b8b;
 font-size: 15px;
 font-weight: 600;
 line-height: 1.2;
}

.collection_list {
display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 column-gap: 32px;
 row-gap: 36px;
 width: 100%;
}

.collection_list > * {
min-width: 0;
 width: 100%;
}

@media (max-width: 600px) {
.collection_list {
column-gap: 16px;
 row-gap: 16px;
}
}

@container (max-width: 431px) {
.collection_list {
grid-template-columns: repeat(2, minmax(0, 1fr));
 column-gap: 16px;
 row-gap: 28px;
}

.mood-list {
gap: 24px;
}

.mood-card {
gap: 12px;
}

.mood-card img {
width: 52px;
 height: 52px;
 flex-basis: 52px;
}
}

@container (max-width: 340px) {
.section-title {
gap: 12px;
 padding-bottom: 32px;
}

.section-title h2 {
font-size: 20px;
}

.mood-card__text b {
font-size: 16px;
}

.mood-card__text small {
font-size: 13px;
}
}

.collection_list .cover-card {
display: flex;
 flex-direction: column;
 gap: 20px;
 min-width: 0;
 width: 100%;
 color: #fff;
 text-decoration: none;
 font-family: Manrope, Arial, sans-serif;
}

.collection_list .cover-card__image {
display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1 / 1;
 border-radius: 12px;
 object-fit: cover;
 opacity: 0.6;
 transition: opacity 0.2s ease, transform 0.2s ease;
}

.collection_list .cover-card:hover .cover-card__image {
opacity: 1;
 transform: scale(1.02);
}

.collection_list .cover-card__info {
display: flex;
 flex-direction: column;
 gap: 8px;
 min-width: 0;
}

.collection_list .cover-card__title {
margin: 0;
 overflow: hidden;
 color: #fff;
 font-family: Manrope, Arial, sans-serif;
 font-size: 18px;
 font-weight: 600;
 line-height: 1.1;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.collection_list .cover-card__genre {
margin: 0;
 overflow: hidden;
 color: #8b8b8b;
 font-family: Manrope, Arial, sans-serif;
 font-size: 14px;
 font-weight: 600;
 line-height: 1.2;
 text-overflow: ellipsis;
 white-space: nowrap;
}

/* Episode cards */
#allEntries {
width:100%!important
}

#episode.arena-episode {
--episode-progress:0%;position:relative;width:100%;min-height:212px;margin:0 0 24px;overflow:hidden; border: 1px solid rgba(255, 255, 255, 0.06);border-radius:20px;background:rgba(16,16,16,0.96);color:#fff;font-family:Manrope,Arial,sans-serif;transition:opacity .3s ease
}

#episode.arena-episode.is-muted {
opacity:.6
}

#episode.arena-episode * {
box-sizing:border-box
}

#episode .episode_info {
display:block;margin:0;padding:0
}

#episode .episode_header {
position:absolute;top:15px;right:15px;left:15px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px
}

#episode .episode_identity {
display:flex;max-width:calc(100% - 260px);min-width:0;gap:16px
}

#episode #episode_img {
width:64px;height:64px;flex:0 0 64px;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:12px
}

#episode #episode_img a,
#episode #episode_img img {
display:block;width:100%;height:100%
}

#episode #episode_img img {
border:0;border-radius:11px;object-fit:cover
}

#episode #episode_text {
min-width:0;width:auto;padding-top:5px
}

#episode .episode_name {
display:flex;flex-direction:column;gap:12px;margin:0;color:rgba(255,255,255,.60);font-size:16px;font-weight:600;letter-spacing:.16px;line-height:16px;white-space:nowrap
}

#episode .episode_name a {
overflow:hidden;color:inherit;text-decoration:none;text-overflow:ellipsis
}

#episode .podcastlinktitle {
display:block;max-width:360px;margin:0;color:#fff!important;font-size:20px;font-weight:600;line-height:20px;text-decoration:none;text-overflow:ellipsis;overflow:hidden
}

#episode .episode_tags {
position:absolute;top:0;right:0;display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;gap:12px
}

#episode .episode_tags a {
display:block;padding:6px 12px;border:1px solid rgba(255,255,255,.20);border-radius:100px;color:rgba(255,255,255,.40);font-size:15px;font-weight:600;letter-spacing:.15px;line-height:16px;text-decoration:none;white-space:nowrap
}

#episode .episode_desc {
position:absolute;top:93px;left:95px;max-width:min(560px,calc(100% - 370px));height:33px;margin:0;overflow:hidden;color:rgba(255,255,255,.60);font-size:16px;font-weight:500;letter-spacing:.16px;line-height:24px;text-overflow:clip;white-space:nowrap
}

#episode .episode_desc:not(.is-short):after {
position:absolute;top:0;right:0;width:56px;height:100%;background:linear-gradient(to right,rgba(0,0,0,0),#0f0f0f);content:'';pointer-events:none
}

#episode .player {
position:absolute;right:15px;bottom:0;left:19px;height:64px
}

#episode .audio {
display:none
}

#episode .controls {
display:block;height:100%
}

#episode .playPause {
position:absolute;z-index:3;bottom:0;left:-4px;display:grid;width:56px!important;min-width:56px!important;height:64px!important;min-height:64px!important;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;transition:opacity .25s ease,transform .25s ease
}

#episode .playPause:hover {
opacity:.7;transform:scale(1.05)
}

#episode .playPause img {
display:block;width:56px;height:64px;filter:invert(1);object-fit:contain
}

#episode .time {
position:absolute;top:0;right:0;bottom:0;left:76px;border-top:1px solid rgba(255,255,255,.10)
}

#episode .waveform {
position:absolute;inset:-1px 0 0;overflow:visible;background:linear-gradient(90deg,rgba(255,255,255,.04) 0 var(--episode-progress),rgba(255,255,255,0) var(--episode-progress));cursor:pointer
}

#episode .waveform:before {
position:absolute;top:0;bottom:0;left:var(--episode-progress);width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.65),rgba(255,255,255,.08));content:'';transform:translateX(-50%)
}

#episode .waveform:after {
position:absolute;top:-4px;left:var(--episode-progress);width:7px;height:7px;border-radius:50%;background:#777;box-shadow:0 0 0 1px rgba(255,255,255,.12);content:'';transform:translateX(-50%)
}

#episode.arena-episode:not(.has-started) .waveform:before,
#episode.arena-episode:not(.has-started) .waveform:after {
opacity:0
}

#episode .episode_seek {
position:absolute;z-index:2;inset:-1px 0 0;width:100%;height:63px;margin:0;opacity:0;pointer-events:none
}

#episode .timeDisplay {
position:absolute;z-index:3;bottom:14px;width:60px;color:rgba(255,255,255,.40);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:500;letter-spacing:-.56px;line-height:20px;pointer-events:none
}

#episode .time-display-current {
left:0;text-align:left
}

#episode .time-display-duration {
right:0;text-align:right
}

#episode .episode_tools {
display:none
}

#episode .episode_tools a {
color:rgba(255,255,255,.40);font-size:13px;text-decoration:none
}

#episode #moder {
margin:0
}

@media(max-width:760px) {
#episode.arena-episode {
min-height:260px;border-radius:16px
}

#episode .episode_header {
display:block
}

#episode .episode_identity {
max-width:none
}

#episode .episode_tags {
position:static;margin-top:12px;justify-content:flex-start;gap:6px
}

#episode .episode_tags a {
padding:5px 9px;font-size:15px;line-height:16px
}

#episode .episode_desc {
top:122px;right:15px;left:95px;max-width:none
}

#episode .episode_tools {
display:none
}
}

@media(max-width:540px) {
#episode.arena-episode {
min-height:0;padding:12px
}

#episode .episode_header {
position:static;right:auto;left:auto
}

#episode #episode_img {
width:54px;height:54px;flex-basis:54px
}

#episode #episode_text {
padding-top:1px
}

#episode .time {
left:70px
}

#episode .episode_name {
gap:4px;font-size:14px;line-height:16px
}

#episode .podcastlinktitle {
max-width:190px;margin-top:0;font-size:17px;line-height:19px
}

#episode .episode_tags {
position:static;margin-top:10px
}

#episode .episode_desc {
display:none
}

#episode .episode_desc.is-short {
height:auto;max-height:none;overflow:visible;text-overflow:clip
}

#episode .player {
position:relative;right:auto;bottom:auto;left:auto;margin-top:24px
}

#episode .time {
left:54px
}

#episode .timeDisplay {
font-size:12px
}
}

#episode .episode_desc.is-short {
-webkit-mask-image:none;mask-image:none
}

/* Catalog date labels */
#bodycontent.arena-page--catalog #episode .episode_tags a {
text-transform: lowercase;
}

/* Category header */
.arena-cathead {
container-type: inline-size;
 position: relative;
 width: 100%;
 margin: 0 0 24px;
 overflow: hidden;
 border-radius: 24px;
 background: #0d0d0d;
 color: #fff;
 font-family: Manrope, Arial, sans-serif;
}

.arena-cathead,
.arena-cathead * {
box-sizing: border-box;
}

.arena-cathead__cover {
position: relative;
 height: 421px;
 margin-bottom: -128px;
 overflow: hidden;
 pointer-events: none;
}

.arena-cathead__cover,
.arena-cathead__avatar img {
opacity: 0;
 transition: opacity .6s ease;
}

.arena-cathead__cover.is-loaded,
.arena-cathead__avatar img.is-loaded {
opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
.arena-cathead__cover,
.arena-cathead__avatar img {
transition: none;
}
}

.arena-cathead__art {
display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.arena-cathead__fade {
position: absolute;
 left: 0;
 bottom: 0;
 display: block;
 width: 100%;
 height: 247px;
}

.arena-cathead__body {
position: relative;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 28px;
 padding: 32px 34px 40px;
}

.arena-cathead__identity {
display: flex;
 align-items: flex-end;
 gap: 24px;
 min-width: 0;
}

.arena-cathead__avatar {
position: relative;
 flex: 0 0 128px;
 width: 128px;
 height: 128px;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, .1);
 border-radius: 12px;
}

.arena-cathead__avatar img {
display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.arena-cathead__titles {
display: flex;
 flex: 1;
 flex-direction: column;
 gap: 16px;
 min-width: 0;
 padding-bottom: 6px;
 overflow-wrap: anywhere;
}

.arena-cathead .arena-cathead__title {
margin: 0;
 color: #fff;
 font: 600 32px/1 Manrope, Arial, sans-serif;
}

.arena-cathead .arena-cathead__subtitle {
margin: 0;
 color: rgba(255, 255, 255, .6);
 font: 500 20px/1 Manrope, Arial, sans-serif;
}

.arena-cathead__divider {
width: 100%;
 height: 1px;
 background: url("/images/category-header/divider.svg") left center repeat-x;
}

.arena-cathead__description {
max-width: 80cqw;
 color: rgba(255, 255, 255, .6);
 font: 500 16px/24px Manrope, Arial, sans-serif;
 overflow-wrap: anywhere;
}

.arena-cathead__description p {
margin: 0;
}

.arena-cathead__description p + p {
margin-top: 1em;
}

@container (max-width: 700px) {
.arena-cathead__cover {
height: 320px; margin-bottom: -104px;
}

.arena-cathead__fade {
height: 210px;
}

.arena-cathead__body {
padding: 28px 24px 32px; gap: 24px;
}

.arena-cathead__avatar {
flex-basis: 104px; width: 104px; height: 104px;
}

.arena-cathead .arena-cathead__title {
font-size: 32px; line-height: 1.1;
}

.arena-cathead .arena-cathead__subtitle {
font-size: 20px;
}
}

@container (max-width: 440px) {
.arena-cathead__cover {
height: 240px; margin-bottom: -80px;
}

.arena-cathead__fade {
height: 170px;
}

.arena-cathead__body {
padding: 24px 20px 28px; gap: 20px;
}

.arena-cathead__avatar {
flex-basis: 80px; width: 80px; height: 80px;
}

.arena-cathead__titles {
padding-bottom: 4px; gap: 10px;
}

.arena-cathead .arena-cathead__title {
font-size: 28px; line-height: 1.15;
}

.arena-cathead .arena-cathead__subtitle {
font-size: 16px; line-height: 1.25;
}
}

/* Text pages */
:where(.arena-page--pages) .bodyh1 {
font-family: Manrope;
 font-size: 36px;
 font-style: normal;
 color: #DFDFDF;
 font-weight: 600;
 line-height: 34px;
 letter-spacing: 0.18px;
}

:where(.arena-page--pages) .bodystyle {
width: 80%;
 float: left;
 color: #DFDFDF;
 font-family: Manrope;
 font-size: 18px;
 font-style: normal;
 font-weight: 500;
 line-height: 34px;
 letter-spacing: 0.18px;
}

/* Material description and tracklist */
#podcastmore {
position: relative;
 width: 100%;
 min-height: 600px;
 margin: 0 0 24px;
 overflow: hidden;
 border: 1px solid rgba(255, 255, 255, 0.06);
 border-radius: 20px;
 background: rgba(16,16,16,.96);
 color: #fff;
 font-family: Manrope, Arial, sans-serif;
 padding: 32px;
 font-size: 16px;
 font-weight: 500;
 letter-spacing: .16px;
 line-height: 24px;
}

#podcastmore h3 {
padding-bottom: 12px;
}

/* Shared new-template details */
:where(.arena-new27) #fixedcontent {
padding: 0;
}

:where(.arena-new27) #mobilefeed {
width: 100%; background: #000; min-height: 400px; z-index: 10; position: relative;
}

:where(.arena-new27) .briefbig {
min-width: 160px;
}

:where(.arena-new27) .briefname {
font-size: 16px;
}

:where(.arena-new27) .briefinfo {
gap: 6px;
}

:where(.arena-new27) .briefcase {
line-height: 130%;
}

/* Shared new-template background */
:where(.arena-new27) #back_cover {
width: 100%;
 top: 0;
 left: 0;
 height: 100vh;
 position: fixed;
 background-color: #000;
 background-image: url("https://arenaradio.ru/images/back_soundwave.jpeg");
 background-repeat: no-repeat;
 background-position: center top;
 background-size: cover;
 z-index: -1;
}

:where(.arena-new27) #today {
background: rgba(27, 27, 27, 0.96) !important; display: none;
}

:where(.arena-new27) #feed_ads {
background: rgba(27, 27, 27, 0.96) !important; display: none;
}

:where(.arena-new27) #content_podcast {
background: rgba(16, 16, 16, 0.90) !important;
}

@media (max-width: 600px) {
:where(.arena-new27) #start {
height: 0;
}
}

@media (min-width: 600px) {
:where(.arena-new27) #mainhead {
margin-top: -100px;
}
}

/* Material typography */
#bodycontent.arena-page--material > #rightcontent {
color: #8b8b8b;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

/* Persistent footer player, popup and mobile navigation */
#p2pplayer,
#p2pplayer *,
#p2p_popup,
#p2p_popup * {
box-sizing:border-box;font-family:Manrope,Arial,sans-serif
}

#p2pplayer {
--p2p-progress:0%;--p2p-volume:80%;color:#fff;position:fixed;z-index:9999;right:0;bottom:0;left:0;pointer-events:none
}

#p2p_frame {
height:97px;padding:16px 16px 20px;border-top:1px solid rgba(255,255,255,.1);border-radius:32px 32px 0 0;background:#000;pointer-events:auto
}

#p2p_mobile_nav {
display:none
}

#p2p_mobile_menu {
display:none
}

#p2p_row {
display:flex;align-items:center;justify-content:center;width:100%;height:60px;gap:12px
}

#p2p_cover_wrap {
width:60px;height:60px;flex:0 0 60px;overflow:hidden;border-radius:12px
}

#p2p_cover {
display:block;width:100%;height:100%;object-fit:cover
}

.p2p_card {
position:relative;display:flex;align-items:center;height:60px;min-width:0;border:.5px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(16,16,16,.96);backdrop-filter:blur(20px)
}

button {
-webkit-tap-highlight-color:transparent
}

#p2p_track_card {
width:400px;flex:0 1 400px;gap:14px;padding:12px 0 12px 20px;overflow:hidden
}

#p2p_playpause {
width:35px;height:36px;flex:0 0 35px;padding:0;border:0;background:transparent;cursor:pointer
}

#p2p_playpause img {
display:block;width:100%;height:100%;filter:invert(1);object-fit:contain
}

#p2p_playpause,
#p2p_tracklist_button,
#p2p_volume_button,
#p2p_popup_link_button,
#p2p_action_link,
#p2p_expand,
#p2p_popup_close {
transition:opacity .5s ease,transform .5s ease
}

#p2p_playpause:hover,
#p2p_tracklist_button:hover,
#p2p_volume_button:hover,
#p2p_popup_link_button:hover,
#p2p_action_link:hover,
#p2p_expand:hover,
#p2p_popup_close:hover {
opacity:.72;transform:scale(1.06)
}

#p2p_track_link {
display:flex;min-width:0;flex:1 1 auto;flex-direction:column;gap:6px;padding:2px 18px 2px 0;border:0;background:transparent;color:inherit;overflow:hidden;text-align:left
}

#p2p_track_author {
overflow:hidden;color:rgba(255,255,255,.6);font-size:12px;font-weight:600;line-height:1;letter-spacing:.12px;text-overflow:ellipsis;white-space:nowrap
}

#p2p_track_title {
overflow:hidden;color:#fff;font-size:15px;font-weight:600;line-height:20px;text-overflow:ellipsis;white-space:nowrap
}

#p2p_track_link.is-link {
cursor:pointer
}

#p2p_track_card:after {
position:absolute;top:0;right:0;width:60px;height:100%;background:linear-gradient(270deg,#101010 13.11%,rgba(16,16,16,0) 100%);content:'';pointer-events:none
}

#p2p_expand {
display:none
}

#p2p_expand img {
display:block;width:22px;height:22px;object-fit:contain
}

#p2p_progress_card {
flex:1 1 280px;gap:16px;padding:16px 20px;overflow:visible;background:#101010
}

#p2p_progress_visual {
--p2p-marker:var(--p2p-progress);position:absolute;z-index:2;top:0;bottom:0;left:96px;right:96px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) var(--p2p-marker),rgba(16,16,16,0) var(--p2p-marker));pointer-events:none
}

#p2p_progress_visual:before {
position:absolute;top:0;bottom:0;left:var(--p2p-marker);width:1px;background:#fff;content:''
}

#p2p_progress_visual:after {
position:absolute;top:-3px;left:var(--p2p-marker);width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18);content:'';transform:translateX(-50%)
}

.p2p_progress_edge {
position:absolute;z-index:3;top:50%;width:1px;height:30px;background:rgba(255,255,255,.1);pointer-events:none;transform:translateY(-50%)
}

.p2p_progress_edge--start {
left:96px
}

.p2p_progress_edge--end {
right:96px
}

#p2p_current_time,
#p2p_duration,
#p2p_popup_current_time,
#p2p_popup_duration {
width:60px;flex:0 0 60px;color:rgba(255,255,255,.4);font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:500;letter-spacing:-.6px;line-height:20px;text-align:center
}

@keyframes p2p_live_colon {
0%,100%{opacity:1}50%{opacity:.2}
}

#p2pplayer.p2p_live_mode .p2p_live_colon,
#p2p_popup.is-live .p2p_live_colon {
animation:p2p_live_colon 2s ease-in-out infinite
}

#p2p_progress_slider,
#p2p_popup_slider,
#p2p_volume_slider {
appearance:none;-webkit-appearance:none;border:0!important;outline:0!important;box-shadow:none!important;cursor:pointer
}

#p2p_progress_slider:focus,
#p2p_progress_slider:focus-visible {
border:0!important;outline:0!important;box-shadow:none!important
}

#p2p_progress_slider::-moz-focus-outer {
border:0
}

#p2p_progress_slider {
position:relative;z-index:4;width:100%;min-width:40px;height:60px;margin:-16px 0;padding:0;background:transparent
}

#p2p_progress_slider::-webkit-slider-runnable-track {
height:60px;border:0;background:transparent
}

#p2p_progress_slider::-moz-range-track {
height:60px;border:0;background:transparent
}

#p2p_progress_slider::-moz-range-progress {
height:60px;background:transparent
}

#p2p_progress_slider::-webkit-slider-thumb {
width:1px;height:1px;margin:0;border:0;background:transparent;box-shadow:none;-webkit-appearance:none
}

#p2p_progress_slider::-moz-range-thumb {
width:1px;height:1px;border:0;background:transparent;box-shadow:none
}

#p2p_progress_card.is-live #p2p_progress_slider {
pointer-events:none;opacity:0
}

#p2p_progress_card.is-live #p2p_progress_visual {
display:none
}

#p2p_volume_card {
width:131px;flex:0 0 131px;justify-content:center;gap:20px;padding:12px 20px
}

#p2p_volume_button {
display:grid;width:25px;height:26px;place-items:center;padding:0;border:0;background:transparent;cursor:pointer;transition:opacity .2s ease
}

#p2p_volume_button img {
display:block;width:25px;height:25px;object-fit:contain
}

#p2p_action_link {
display:grid;width:25px;height:25px;place-items:center;flex:0 0 25px
}

#p2p_action_link img {
display:block;width:25px;height:25px;object-fit:contain
}

#p2p_volume_slider {
position:absolute;bottom:calc(100% + 12px);left:var(--p2p-volume-popover-left,50%);width:36px;height:132px;margin:0;padding:16px 0;border:0;border-radius:100px;background:rgba(16,16,16,.96);box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .18s ease,transform .18s ease;writing-mode:vertical-lr;direction:rtl
}

#p2p_volume_card.is-open #p2p_volume_slider {
opacity:1;pointer-events:auto;transform:translate(-50%,0)
}

#p2p_volume_slider::-webkit-slider-runnable-track {
width:4px;height:100px;border-radius:999px;background:linear-gradient(to top,#fff 0 var(--p2p-volume),rgba(255,255,255,.2) var(--p2p-volume) 100%)
}

#p2p_volume_slider::-webkit-slider-thumb {
width:12px;height:12px;margin-left:-4px;border:0;border-radius:50%;background:#fff;box-shadow:none;-webkit-appearance:none;appearance:none
}

#p2p_volume_slider::-moz-range-track {
width:4px;height:100px;border-radius:999px;background:rgba(255,255,255,.2)
}

#p2p_volume_slider::-moz-range-progress {
width:4px;background:#fff
}

#p2p_volume_slider::-moz-range-thumb {
width:12px;height:12px;border:0;border-radius:50%;background:#fff
}

#p2p_popup,
#p2p_popup_backdrop {
display:none
}

@media(max-width:900px) and (min-width:601px) {
#p2p_cover_wrap {
display:none
}

#p2p_track_card {
width:250px;flex-basis:250px
}

#p2p_progress_card {
flex-basis:220px
}
}

@media(max-width:600px) {
#p2pplayer {
background:linear-gradient(178.758deg,rgba(0,0,0,0) 9.246%,#000 41.047%)
}

#p2p_frame {
padding:24px 12px 20px;border-top:0;background:transparent
}

#p2p_row {
gap:0
}

#p2p_cover_wrap,
#p2p_progress_card,
#p2p_volume_card {
display:none
}

#p2p_mobile_nav {
display:flex;height:60px;padding:0 16px 16px;background:transparent;pointer-events:auto
}

.p2p_mobile_nav_link {
display:flex;min-width:0;flex:1 1 33.333%;flex-direction:column;align-items:center;justify-content:flex-start;color:#fff;font-size:12px;font-weight:600;line-height:16px;text-align:center;text-decoration:none;opacity:.4;transition:opacity .25s ease
}

.p2p_mobile_nav_link.is-active {
opacity:1
}

.p2p_mobile_nav_link:hover {
opacity:.72
}

.p2p_mobile_nav_link.is-active:hover {
opacity:1
}

.p2p_mobile_nav_icon {
display:flex;width:28px;height:28px;align-items:center;justify-content:center;overflow:hidden
}

.p2p_mobile_nav_icon img {
display:block;max-width:none
}

#p2p_mobile_menu[hidden] {
display:none
}

#p2p_mobile_menu {
position:fixed;z-index:10001;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:20px;overflow:hidden;padding:18px 18px 32px;border-radius:24px 24px 0 0;background:#101010;color:#fff;pointer-events:auto;opacity:0;transform:translateY(24px)
}

#p2p_mobile_menu.is-open {
animation:p2p_mobile_move_in .28s cubic-bezier(.22,.8,.26,1) forwards
}

#p2p_mobile_menu.is-closing {
animation:p2p_mobile_move_out .28s ease forwards
}

.p2p_mobile_menu_profile {
display:flex;align-items:center;gap:12px;height:48px
}

.p2p_mobile_menu_avatar {
display:block;width:48px;height:48px;flex:0 0 48px;border-radius:12px;object-fit:cover
}

.p2p_mobile_menu_profile_text {
display:flex;flex-direction:column;gap:4px;justify-content:center;line-height:20px;white-space:nowrap
}

.p2p_mobile_menu_profile_text strong {
font-size:18px;font-weight:600
}

.p2p_mobile_menu_profile_text span {
color:rgba(255,255,255,.6);font-size:15px;font-weight:500
}

#p2p_mobile_menu_close {
position:absolute;top:18px;right:18px;display:flex;width:40px;height:40px;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer
}

#p2p_mobile_menu_close img {
display:block;max-width:none
}

#p2p_mobile_menu hr {
width:100%;height:1px;margin:0;border:0;border-top:1px solid rgba(255,255,255,.1)
}

.p2p_mobile_menu_divider {
display:block;max-width:100%;height:auto
}

.p2p_mobile_menu_content {
display:flex;flex-direction:column;gap:20px;width:100%
}

.p2p_mobile_menu_grid {
display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px 20px;width:100%
}

.p2p_mobile_menu_item {
display:flex;min-width:0;align-items:center;gap:8px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.6);font-size:15px;font-weight:500;line-height:20px;text-align:left;text-decoration:none;cursor:pointer
}

.p2p_mobile_menu_item_icon {
display:flex;width:28px;height:28px;align-items:center;justify-content:center;flex:0 0 28px;overflow:hidden
}

.p2p_mobile_menu_item_icon img {
display:block;max-width:none
}

.p2p_mobile_menu_legal {
display:flex;flex-direction:column;gap:16px;color:rgba(255,255,255,.4);font-size:15px;font-weight:500;line-height:20px;white-space:nowrap
}

.p2p_mobile_menu_legal div {
display:flex;flex-wrap:wrap;gap:8px 12px
}

#p2p_track_card {
width:100%;max-width:none;height:60px;flex:1 1 auto;padding-right:12px;padding-left:12px;background:#2C2C2C
}

#p2p_track_link {
padding-right:0;cursor:pointer
}

#p2p_expand {
display:grid;width:24px;height:32px;place-items:center;flex:0 0 24px;padding:0;border:0;background:transparent;cursor:pointer
}

#p2p_expand img {
width:22px;height:22px
}

#p2p_track_card:after {
display:none
}

#p2p_popup_backdrop {
position:fixed;z-index:9999;inset:0;display:block;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .32s ease
}

#p2p_popup_backdrop.is-visible {
opacity:1;pointer-events:auto
}

#p2p_popup_backdrop[hidden] {
display:none
}

#p2p_popup[hidden] {
display:none
}

@keyframes p2p_mobile_move_in {
from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}
}

@keyframes p2p_mobile_move_out {
from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(24px)}
}

#p2p_popup {
--p2p-popup-art-height:min(400px,max(220px,calc(100% - 360px)));position:fixed;z-index:10000;right:0;bottom:0;left:0;display:block;height:min(800px,calc(100dvh - 20px));overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-radius:32px 32px 0 0;background:#101010;color:#fff;box-shadow:0 -20px 80px rgba(0,0,0,.55);opacity:0;transform:translateY(24px)
}

#p2p_popup.is-open {
animation:p2p_mobile_move_in .32s cubic-bezier(.22,.8,.26,1) forwards
}

#p2p_popup.is-closing {
animation:p2p_mobile_move_out .32s ease forwards
}

#p2p_popup_cover {
position:absolute;top:0;left:0;display:block;width:100%;height:var(--p2p-popup-art-height);object-fit:cover
}

#p2p_popup_shade {
position:absolute;top:calc(var(--p2p-popup-art-height) + 98px);right:0;left:0;height:301px;background:linear-gradient(to bottom,rgba(16,16,16,0),#101010 21.957%);pointer-events:none
}

#p2p_popup_close {
position:absolute;z-index:2;top:16px;right:16px;display:grid;width:36px;height:36px;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.38);cursor:pointer
}

#p2p_popup_close img {
display:block;width:22px;height:22px;object-fit:contain
}

#p2p_popup_progress {
position:absolute;z-index:1;top:var(--p2p-popup-art-height);right:0;left:0;display:flex;align-items:flex-start;justify-content:space-between;height:144px;padding-top:12px
}

#p2p_popup_progress:before {
position:absolute;top:0;bottom:-157px;left:0;width:var(--p2p-progress);background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.13));content:'';pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 55%);mask-image:linear-gradient(to bottom,#000 0%,#000 26%,transparent 55%)
}

#p2p_popup_progress:after {
position:absolute;top:0;bottom:-157px;left:var(--p2p-progress);width:1px;background:linear-gradient(to bottom,rgba(255,255,255,.72) 0%,rgba(255,255,255,.38) 26%,rgba(255,255,255,0) 55%);content:'';pointer-events:none;transform:translateX(-50%)
}

#p2p_popup_marker {
position:absolute;top:-5px;left:var(--p2p-progress);width:10px;height:10px;border-radius:50%;background:#7b7b7b;box-shadow:0 0 0 1px rgba(255,255,255,.13);pointer-events:none;transform:translateX(-50%)
}

#p2p_popup_current_time,
#p2p_popup_duration {
position:relative;z-index:3;pointer-events:none
}

#p2p_popup_current_time {
margin-left:12px;text-align:left
}

#p2p_popup_duration {
margin-right:12px;text-align:right
}

#p2p_popup_slider {
position:absolute;z-index:2;top:0;right:0;left:0;width:100%;min-width:0;height:144px;margin:0;border:0;outline:0;background:transparent
}

#p2p_popup_slider::-webkit-slider-runnable-track {
height:2px;border:0;border-radius:99px;background:transparent
}

#p2p_popup_slider::-moz-range-track {
height:2px;border:0;border-radius:99px;background:transparent
}

#p2p_popup_slider::-moz-range-progress {
height:2px;background:transparent
}

#p2p_popup_slider::-webkit-slider-thumb {
width:1px;height:1px;margin:0;border:0;background:transparent;box-shadow:none;-webkit-appearance:none
}

#p2p_popup_slider::-moz-range-thumb {
width:1px;height:1px;border:0;background:transparent;box-shadow:none
}

#p2p_popup.is-live #p2p_popup_slider {
pointer-events:none;opacity:.45
}

#p2p_popup.is-live #p2p_popup_marker,
#p2p_popup.is-live #p2p_popup_progress:after {
display:none
}

#p2p_popup_track {
position:absolute;z-index:2;top:calc(var(--p2p-popup-art-height) + 144px);right:16px;left:16px;display:flex;flex-direction:column;gap:12px;text-align:center
}

#p2p_popup_author {
overflow:hidden;color:rgba(255,255,255,.6);font-size:16px;font-weight:600;letter-spacing:.16px;line-height:20px;text-overflow:ellipsis;white-space:nowrap
}

#p2p_popup_title {
position:relative;top:-4px;overflow:hidden;color:#fff;font-size:20px;font-weight:600;line-height:30px;text-overflow:ellipsis;white-space:nowrap
}

#p2p_popup_actions {
position:absolute;z-index:2;right:16px;bottom:20px;left:16px;display:flex;align-items:center;gap:16px;height:60px
}

#p2p_tracklist_button {
display:flex;flex:1 1 auto;align-items:center;justify-content:center;height:60px;padding:0;border:.5px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(16,16,16,.96);cursor:pointer
}

#p2p_tracklist_button img {
display:block;width:35px;height:36px;filter:invert(1);object-fit:contain
}

#p2p_popup_link_button {
display:grid;width:56px;height:60px;place-items:center;flex:0 0 56px;border:.5px solid rgba(255,255,255,.2);border-radius:16px;background:rgba(16,16,16,.96)
}

#p2p_popup_link_button img {
display:block;width:25px;height:25px;object-fit:contain
}
}

@media(max-height:620px) and (max-width:600px) {
#p2p_popup {
--p2p-popup-art-height:max(190px,calc(100% - 360px))
}

#p2p_popup_progress,
#p2p_popup_slider {
height:74px
}

#p2p_popup_progress:before,
#p2p_popup_progress:after {
bottom:-187px
}

#p2p_popup_track {
top:calc(var(--p2p-popup-art-height) + 74px);gap:8px
}
}

/* Live player interface and wave background */
.player-wrapper[data-arena-live-controls] {
position: relative;
 isolation: isolate;
 overflow: hidden;
 box-sizing: border-box;
 display: flex;
 padding: 100px;
 border: 1px solid rgba(255, 255, 255, .06);
 border-radius: 20px;
 background: rgba(16, 16, 16, .96);
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 10px;
 flex: 1 0 0;
 align-self: stretch;
 min-width: 0;
 height: auto;
 margin-top: 0;
 margin-bottom: 32px;
}

.arena-live-wave {
position: absolute;
 inset: 0;
 z-index: 0;
 pointer-events: none;
}

.player-wrapper > .player {
position: relative;
 z-index: 1;
 max-width: 100%;
}

@media (max-width: 600px) {
.player-wrapper[data-arena-live-controls] {
padding-right: 24px;
 padding-left: 24px;
}
}

.player-wrapper > .player {
display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 color: #f5f5f5;
 font: 600 16pt/28px Manrope, sans-serif;
}

.player-wrapper #playPause {
position: relative;
 width: 90px;
 height: 90px;
 padding: 0;
 border: 0;
 border-radius: 50%;
 -webkit-appearance: none;
 appearance: none;
 background: #f5f5f5 center / 60% no-repeat;
 cursor: pointer;
 touch-action: manipulation;
 opacity: .9;
 transition: opacity .2s ease-in;
}

.player-wrapper #playPause:hover {
opacity: 1;
}

.player-wrapper #playPause:focus {
outline: none;
}

.player-wrapper #playPause:focus-visible {
outline: 2px solid #fff;
 outline-offset: 4px;
}

.player-wrapper #playPause.play {
background-image: url("/play.svg");
}

.player-wrapper #playPause.pause {
background-image: url("/pause.svg");
}

.player-wrapper #playPause.loading {
background-image: none;
}

.player-wrapper #playPause.loading::after {
content: "";
 position: absolute;
 inset: 25%;
 border: 3px solid rgba(0, 0, 0, .2);
 border-top-color: #000;
 border-radius: 50%;
 animation: arena-player-spin .7s linear infinite;
}

@keyframes arena-player-spin {
to { transform: rotate(360deg); }
}

.player-wrapper .title {
margin-top: 12px;
 color: inherit;
 text-align: center;
 font: inherit;
}

.player-wrapper #volume {
all: unset;
 width: 120px;
 margin-top: 16px;
 -webkit-appearance: none;
 appearance: none;
 background: transparent;
 cursor: grab;
 touch-action: pan-x;
}

.player-wrapper #volume::-webkit-slider-runnable-track {
height: 6px;
 border-radius: 999px;
 background: linear-gradient(to right, #fff var(--range-progress, 70%), rgba(255, 255, 255, .6) var(--range-progress, 70%));
}

.player-wrapper #volume::-webkit-slider-thumb {
width: 14px;
 height: 14px;
 margin-top: -4px;
 border: 0;
 border-radius: 50%;
 -webkit-appearance: none;
 appearance: none;
 background: #fff;
}

.player-wrapper #volume::-moz-range-track {
height: 6px;
 border-radius: 999px;
 background: rgba(255, 255, 255, .6);
}

.player-wrapper #volume::-moz-range-progress {
height: 6px;
 border-radius: 999px;
 background: #fff;
}

.player-wrapper #volume::-moz-range-thumb {
width: 14px;
 height: 14px;
 border: 0;
 border-radius: 50%;
 background: #fff;
}

/* SPA loading progress */
#arena-spa-progress {
position: fixed; z-index: 2147483647; top: 0; left: 0; width: 100%; height: 3px; pointer-events: none; opacity: 0; transform: scaleY(1); transform-origin: top center; transition: opacity .5s ease, transform .5s ease;
}

#arena-spa-progress__line {
width: 0; height: 100%; background: #FF0055; box-shadow: 0 0 10px rgba(255, 0, 85, .9); transition: width .42s cubic-bezier(.22, .61, .36, 1);
}

#arena-spa-progress.is-visible {
opacity: 1;
}

#arena-spa-progress.is-hiding {
opacity: 0; transform: scaleY(.35);
}

/* SPA error notice */
#arena-spa-error {
position: fixed;
  z-index: 2147483646;
  left: 50%;
  bottom: 90px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  transform: translateX(-50%);
  border-radius: 10px;
  background: #24111a;
  color: #fff;
  font: 600 14px/1.35 Manrope, Arial, sans-serif;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Compatibility for non-migrated pages using FOOTPLAYER */
#bodycontent:not(.arena-layout) {
width: calc(100% - 80px);
  min-height: 1000px;
  max-width: 1800px;
  margin: 20px auto 0;
  display: flex;
  gap: 50px;
}

#bodycontent:not(.arena-layout) #leftcontent {
width: 240px;
  flex: 0 0 240px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  height: fit-content;
}

#bodycontent:not(.arena-layout) #rightcontent {
flex: 1; min-width: 0;
}

#bodycontent:not(.arena-layout) .player-wrapper {
margin-top: 0 !important; height: 400px;
}

@media (max-width: 900px) {
#bodycontent:not(.arena-layout) {
display: block;
}

#bodycontent:not(.arena-layout) #leftcontent {
display: none;
}

#bodycontent:not(.arena-layout) #rightcontent {
width: 100%;
}
}

@media (max-width: 600px) {
#bodycontent:not(.arena-layout) {
width: calc(100% - 30px);
}
}

/* Single shared page shell */
#bodycontent.arena-layout {
--arena-sidebar-width: 240px;
  --arena-column-gap: 50px;
  --arena-page-gutter: 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--arena-sidebar-width) minmax(0, 1fr);
  align-items: start;
  gap: var(--arena-column-gap);
  width: calc(100% - 2 * var(--arena-page-gutter));
  max-width: 1800px;
  min-height: 1000px;
  margin: 20px auto 0;
  padding-bottom: 128px;
}

#bodycontent.arena-layout > #leftcontent {
position: sticky;
  top: 100px;
  align-self: start;
  width: auto;
  min-width: 0;
  max-width: none;
  height: fit-content;
  color: #fff;
  font-family: Manrope, Arial, sans-serif;
}

#bodycontent.arena-layout > #rightcontent {
box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  container-type: inline-size;
}

#bodycontent.arena-layout #allEntries {
width: 100%; min-width: 0;
}

.arena-new27 .player-wrapper[data-arena-live-controls] {
margin-top: 0;
}

@media (max-width: 900px) {
#bodycontent.arena-layout {
grid-template-columns: minmax(0, 1fr);
}

#bodycontent.arena-layout > #leftcontent {
display: none;
}
}

@media (max-width: 600px) {
#bodycontent.arena-layout {
--arena-page-gutter: 15px;
    margin-top: 76px;
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}
}


/* Schedule page */
.arena-schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: rgba(16, 16, 16, 0.96);
  color: #fff;
}
.arena-schedule > .day { min-width: 0; }
.arena-schedule .dayzag {
  margin-bottom: 20px;
  font: 600 26px/1.2 Manrope, Arial, sans-serif;
  color: #fff;
}
.arena-schedule .show {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
  min-width: 0;
}
.arena-schedule .show:last-child { margin-bottom: 0; }
.arena-schedule .show img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.arena-schedule .hours {
  flex: 0 0 60px;
  margin-top: 4px;
  font: 550 18px/1.1 Manrope, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.6);
}
.arena-schedule .showtitle { min-width: 0; }
.arena-schedule .showname {
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
  font: 600 18px/1.2 Manrope, Arial, sans-serif;
  color: #fff;
}
.arena-schedule .showdesc {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}
@container (max-width: 640px) {
  .arena-schedule { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .arena-schedule {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}


/* Shared content panel for site pages */
.arena-page-panel {
  box-sizing: border-box;
  min-width: 0;
  margin: 0 0 24px;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: rgba(16, 16, 16, 0.96);
  color: #fff;
}
.arena-page-panel .bodyh1 {
  margin: 0 0 24px;
  overflow-wrap: anywhere;
}
.arena-page-panel .bodystyle {
  width: 100%;
  float: none;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .arena-page-panel { padding: 24px; }
}


/* Keep the desktop sticky sidebar stable at the page's scroll boundaries. */
@media (min-width: 901px) {
  html.arena-new27,
  html.arena-new27 body {
    overscroll-behavior-y: none;
  }
}


/* Curator lists fill the main column and share the standard panel styling. */
.arena-page--curators #content_podcast {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none;
  color: rgb(255, 255, 255);
  font-family: Manrope, Arial, sans-serif;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  background: rgba(16, 16, 16, 0.96) !important;
}
