:root{
  --bg: #0b0b0f;
  --panel: rgba(18, 18, 24, .82);
  --panel2: rgba(18, 18, 24, .62);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --faint: rgba(255,255,255,.55);
  --stroke: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 16px;
  --radius2: 14px;
  --space: 16px;
  --space2: 22px;
  --max: 980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background:
    radial-gradient(1200px 900px at 30% 10%, rgba(0,0,0,.25), rgba(0,0,0,.75) 70%, rgba(0,0,0,.92)),
    url("art/burpan2.jpg") center / cover fixed no-repeat,
    var(--bg);
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--space) 48px;
}

.hero{
  position: relative;
  min-height: 42vh;
  display: grid;
  place-items: end start;
  padding: 28px 0 56px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.65)),
    url("art/burpan1.jpg") center / cover no-repeat;
  box-shadow: var(--shadow);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(0,0,0,.05), rgba(0,0,0,.62)),
    linear-gradient(to top, rgba(11,11,15,.95), rgba(11,11,15,.15));
}

.hero__content{
  position:relative;
  max-width: var(--max);
  width:100%;
  margin: 0 auto;
  padding: 0 var(--space);
}

.hero__title{
  margin: 0;
  font-size: clamp(34px, 4.6vw, 54px);
  letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(0,0,0,.8);
}

.hero__subtitle{
  margin: 8px 0 0;
  color: var(--muted);
  text-shadow: 0 10px 40px rgba(0,0,0,.8);
}

.player{
  margin-top: 0;
  padding: var(--space2);
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.player__now{
  display:flex;
  gap: 16px;
  align-items:center;
}

.player__cover{
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
}

.player__meta{min-width:0}
.player__label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}
.player__title{
  margin-top: 4px;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player__file{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__audio{
  width: 100%;
  margin-top: 14px;
}

.hint{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 206, 128, .25);
  background: rgba(255, 206, 128, .08);
  color: rgba(255,255,255,.88);
  line-height: 1.4;
}
.hint__code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

.playlist{
  margin-top: 16px;
  padding: var(--space2);
  background: var(--panel2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
}

.playlist__head{
  display:flex;
  gap: 14px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.playlist__title{margin:0; font-size: 18px}
.playlist__meta{color: var(--muted); font-size: 13px}
.playlist__list{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

.track{
  display:flex;
  gap: 14px;
  align-items: center;
  padding: 14px 14px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.track:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.16);
}
.track[aria-current="true"]{
  border-color: rgba(255,255,255,.24);
  background: rgba(0,0,0,.32);
}

.track__cover{
  width: 88px;
  height: 88px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.track__text{
  min-width:0;
  flex: 1 1 auto;
}
.track__name{
  font-weight: 650;
  line-height: 1.25;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track__sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track__btn{
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 650;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.footer{
  margin-top: 22px;
  color: rgba(255,255,255,.55);
}
.footer__inner{
  padding: 10px 2px;
}

@media (max-width: 520px){
  .player{padding: 16px}
  .playlist{padding: 16px}
  .player__cover{width: 72px; height: 72px}
  .track__cover{width: 72px; height: 72px}
  .track__btn{display:none}
}