*{
  box-sizing:border-box;
}

html{
  color-scheme:dark;
}

body{
  margin:0;
  background:#07090d;
  color:#f7f7f8;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button,
input{
  font:inherit;
}

a{
  color:inherit;
}

.stationShell{
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 56px;
}

.hero{
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:#101319;
}

.hero img{
  display:block;
  width:100%;
  height:auto;
}

.identity{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:24px 0;
}

.identity img{
  width:110px;
  height:110px;
  object-fit:cover;
  border-radius:18px;
}

.eyebrow{
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.65;
}

h1{
  margin:.3rem 0 .4rem;
  font-size:clamp(2rem,6vw,4.8rem);
  line-height:.96;
}

.identity p{
  margin:0;
  max-width:720px;
  opacity:.72;
  line-height:1.55;
}

.player{
  margin:12px 0 28px;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:#101319;
}

.player h2{
  margin:.35rem 0;
}

.transport{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0;
}

.transport button,
#muteButton{
  min-height:44px;
  padding:10px 15px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:#171b23;
  color:#fff;
  cursor:pointer;
}

.timeline{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}

#seek{
  width:100%;
}

.volume{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:15px;
}

#volume{
  width:min(250px,60vw);
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:16px;
  flex-wrap:wrap;
  margin:26px 0 14px;
}

#search{
  width:min(420px,100%);
  min-height:46px;
  padding:11px 14px;
  color:#fff;
  background:#101319;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
}

.playlist{
  display:grid;
  gap:8px;
}

.track{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  color:#fff;
  text-align:left;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:#101319;
  cursor:pointer;
}

.track.active{
  border-color:rgba(255,255,255,.4);
}

.trackTitle{
  overflow:hidden;
  text-overflow:ellipsis;
}

.trackAction{
  flex:none;
  font-size:.72rem;
  letter-spacing:.12em;
}

.empty{
  padding:28px 4px;
  opacity:.68;
}

@media(max-width:640px){
  .stationShell{
    width:min(100% - 18px,1180px);
  }

  .identity{
    grid-template-columns:74px minmax(0,1fr);
  }

  .identity img{
    width:74px;
    height:74px;
  }

  .transport button{
    flex:1 1 calc(50% - 10px);
  }
}