:root{
 color-scheme:dark;
 --line:rgba(255,255,255,.09);
 --muted:#989db2;
 --cyan:#79f3ff;
 --violet:#9b7cff;
 --pink:#ff69ca
}

*{
 box-sizing:border-box
}

html{
 background:#070910
}

body{
 margin:0;
 min-height:100vh;
 color:#f6f7ff;
 font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
 background:
  radial-gradient(circle at 20% 0%,rgba(91,76,180,.18),transparent 35%),
  radial-gradient(circle at 100% 35%,rgba(255,72,180,.10),transparent 30%),
  linear-gradient(180deg,#080a13,#05070d)
}

a{
 color:inherit
}

header,
main,
footer{
 width:min(1120px,calc(100% - 32px));
 margin-left:auto;
 margin-right:auto
}

header{
 padding:24px 0;
 display:flex;
 align-items:center;
 justify-content:space-between
}

.brand{
 display:flex;
 gap:11px;
 align-items:center;
 text-decoration:none
}

.brand img{
 border-radius:12px
}

.brand span{
 display:flex;
 flex-direction:column
}

.brand strong{
 font-size:17px;
 letter-spacing:.12em
}

.brand small{
 color:var(--muted);
 font-size:11px
}

.chat-link{
 padding:10px 15px;
 border:1px solid var(--line);
 border-radius:12px;
 text-decoration:none;
 background:rgba(255,255,255,.035)
}

.hero{
 min-height:620px;
 padding:70px 0 90px;
 display:grid;
 grid-template-columns:minmax(0,1fr) 420px;
 gap:80px;
 align-items:center
}

.live{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:9px;
 font-size:12px;
 font-weight:800;
 letter-spacing:.12em
}

.live i{
 width:8px;
 height:8px;
 border-radius:50%;
 background:#ff477c;
 box-shadow:0 0 14px #ff477c
}

.live span{
 color:var(--muted);
 letter-spacing:0
}

h1{
 margin:20px 0 22px;
 font-size:clamp(64px,9vw,118px);
 line-height:.82;
 letter-spacing:-.065em
}

h1 span{
 display:block;
 color:transparent;
 background:linear-gradient(
  90deg,
  var(--cyan),
  var(--violet),
  var(--pink)
 );
 background-clip:text;
 -webkit-background-clip:text
}

.intro>p{
 max-width:570px;
 color:#b2b6ca;
 font-size:19px;
 line-height:1.65
}

.player{
 padding:30px;
 text-align:center;
 border:1px solid var(--line);
 border-radius:32px;
 background:linear-gradient(
  145deg,
  rgba(255,255,255,.07),
  rgba(255,255,255,.025)
 );
 box-shadow:0 35px 80px rgba(0,0,0,.35)
}

.cover{
 position:relative;
 width:230px;
 height:230px;
 margin:auto
}

.cover>img{
 width:100%;
 height:100%;
 border-radius:56px
}

.eq{
 position:absolute;
 left:50%;
 bottom:20px;
 height:46px;
 transform:translateX(-50%);
 display:flex;
 align-items:flex-end;
 gap:4px;
 padding:8px 11px;
 border-radius:14px;
 background:rgba(5,7,14,.65)
}

.eq i{
 width:3px;
 height:8px;
 border-radius:4px;
 background:linear-gradient(
  var(--cyan),
  var(--pink)
 )
}

.playing .eq i{
 animation:wave .75s ease-in-out infinite alternate
}

.playing .eq i:nth-child(2n){
 animation-delay:.2s
}

.playing .eq i:nth-child(3n){
 animation-delay:.4s
}

.label{
 margin-top:25px;
 color:var(--muted);
 font-size:10px;
 font-weight:800;
 letter-spacing:.18em
}

.track{
 min-height:54px;
 margin-top:9px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:20px;
 font-weight:750;
 line-height:1.35
}

.uploader{
 min-height:22px;
 color:var(--muted);
 font-size:13px
}

#play{
 width:76px;
 height:76px;
 margin-top:22px;
 padding:0;
 border:0;
 border-radius:50%;
 cursor:pointer;
 color:#090b12;
 font-size:26px;
 background:linear-gradient(
  135deg,
  var(--cyan),
  #b0a0ff 55%,
  var(--pink)
 )
}

.volume{
 width:210px;
 margin:20px auto 0;
 display:flex;
 align-items:center;
 gap:10px
}

.volume input{
 width:100%;
 accent-color:#9e86ff
}

.state{
 margin-top:17px;
 color:#777d95;
 font-size:12px
}

.panel,
.about{
 margin-bottom:90px;
 padding:34px;
 border:1px solid var(--line);
 border-radius:26px;
 background:rgba(255,255,255,.025)
}

.panel-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:20px;
 margin-bottom:22px
}

.panel-head small,
.about>small{
 color:#8e93a8;
 font-size:10px;
 font-weight:800;
 letter-spacing:.18em
}

h2{
 margin:7px 0 0
}

#peak{
 color:#8f94a8;
 font-size:12px
}

.history{
 overflow:hidden;
 border:1px solid rgba(255,255,255,.055);
 border-radius:16px
}

.history-item,
.history-empty{
 min-height:58px;
 padding:13px 17px;
 display:flex;
 align-items:center;
 gap:14px;
 background:#0c0f18;
 border-bottom:1px solid rgba(255,255,255,.055)
}

.history-item:last-child{
 border-bottom:0
}

.history-num{
 width:25px;
 color:#555b71;
 font-size:11px
}

.history-main{
 min-width:0;
 flex:1
}

.history-title{
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:14px;
 font-weight:650
}

.history-meta{
 margin-top:3px;
 color:#70768c;
 font-size:11px
}

.about{
 max-width:820px;
 margin-left:auto;
 margin-right:auto;
 text-align:center
}

.about p{
 max-width:680px;
 margin:18px auto 0;
 color:#999eb2;
 font-size:15px;
 line-height:1.75
}

.about a{
 display:inline-block;
 margin-top:23px;
 color:#cfc4ff;
 text-decoration:none
}

footer{
 padding-bottom:42px;
 text-align:center;
 color:#62677b;
 font-size:11px
}

.counter{
 width:max-content;
 max-width:100%;
 margin:0 auto 18px;
 display:flex;
 overflow:hidden;
 border:1px solid var(--line);
 border-radius:9px
}

.counter span{
 padding:7px 10px;
 font-family:Consolas,monospace;
 font-size:9px
}

.counter span+span{
 border-left:1px solid var(--line)
}

.counter strong{
 margin-left:4px;
 color:#a9f6ff
}

@keyframes wave{
 from{height:7px}
 to{height:28px}
}

@media(max-width:850px){

 .hero{
  grid-template-columns:1fr;
  gap:48px;
  padding:45px 0 70px
 }

 .intro{
  text-align:center
 }

 .live{
  justify-content:center
 }

 .intro>p{
  margin-left:auto;
  margin-right:auto
 }

 .player{
  width:min(430px,100%);
  margin:auto
 }

}

@media(max-width:520px){

 header,
 main,
 footer{
  width:calc(100% - 24px)
 }

 header{
  padding:16px 0
 }

 .brand small{
  display:none
 }

 .chat-link{
  padding:9px 12px;
  font-size:13px
 }

 .hero{
  min-height:0;
  padding:36px 0 55px
 }

 h1{
  font-size:68px
 }

 .intro>p{
  font-size:15px
 }

 .player{
  padding:24px 18px;
  border-radius:25px
 }

 .cover{
  width:190px;
  height:190px
 }

 .panel,
 .about{
  padding:22px 16px;
  margin-bottom:55px
 }

}