:root{
  --bg:#050608;
  --fg:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --faint:rgba(255,255,255,.18);
  --hairline:rgba(255,255,255,.10);
  --glass:rgba(22,24,28,.52);
  --glass2:rgba(22,24,28,.28);
  --glow:rgba(255,255,255,.10);
  --shadow:rgba(0,0,0,.55);
  --radius:18px;
  --ease:cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
  overflow:hidden;
}

/* Page fade-in (cannot get stuck black if JS errors) */
body{
  animation: pageIn 900ms var(--ease) both;
}
@keyframes pageIn{
  from{opacity:0}
  to{opacity:1}
}

.chip{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  font-size:12px;
}

.bg{
  position:fixed;
  inset:0;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(255,255,255,.03), transparent 60%),
              radial-gradient(1200px 900px at 70% 30%, rgba(255,255,255,.02), transparent 55%),
              var(--bg);
}
.stars{
  position:absolute;
  inset:0;
}
.starWrap{
  position:absolute;
  transform: translate3d(0,0,0);
  animation: starDrift var(--driftDur, 18s) ease-in-out var(--driftDelay, 0s) infinite alternate;
  will-change: transform;
}
@keyframes starDrift{
  from{ transform: translate3d(0,0,0) }
  to{ transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) }
}

.star{
  position:relative;
  width:2px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  opacity: var(--o, .55);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.25));
  transform: translateZ(0) scale(var(--s,1));
  animation: twinkle var(--dur, 4.2s) ease-in-out var(--delay, 0s) infinite;
}
.starWrap.far .star{
  width:1px;
  height:1px;
  opacity: var(--o, .35);
  filter: drop-shadow(0 0 2px rgba(255,255,255,.18));
}
.starWrap.big .star{
  width:3px;
  height:3px;
  opacity: var(--o, .7);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.32));
}
@keyframes twinkle{
  0%,100%{opacity:calc(var(--o, .55) * .65); transform: translateZ(0) scale(calc(var(--s,1) * .92))}
  45%{opacity:calc(var(--o, .55) * 1.05); transform: translateZ(0) scale(calc(var(--s,1) * 1.05))}
  60%{opacity:calc(var(--o, .55) * .85); transform: translateZ(0) scale(calc(var(--s,1) * .98))}
}
.vignette{
  position:absolute;
  inset:-20%;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.65) 78%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

.stage{
  position:relative;
  height:100%;
  display:grid;
  place-items:center;
  padding:28px;
}

.card{
  width:min(520px, 92vw);
  border-radius:var(--radius);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px var(--shadow), 0 0 0 1px rgba(255,255,255,.04) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:18px 18px 16px;
  opacity:0;
  transform: translateY(10px);
  transition: opacity 900ms var(--ease) 120ms, transform 900ms var(--ease) 120ms;
}
body.entered .card{
  opacity:1;
  transform: translateY(0);
}

.welcome{
  position:fixed;
  inset:0;
  z-index:10;
  display:grid;
  place-items:center;
  opacity:1;
  pointer-events:auto;
  transition: opacity 700ms var(--ease);
}
body.entered .welcome{
  opacity:0;
  pointer-events:none;
}
.welcomeBlur{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.welcomeCard{
  position:relative;
  width:min(520px, 92vw);
  padding:22px 20px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(22,24,28,.62), rgba(22,24,28,.30));
  box-shadow: 0 24px 70px rgba(0,0,0,.60);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(8px);
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}
body.loaded .welcomeCard{transform: translateY(0)}
body.entered .welcomeCard{transform: translateY(10px)}
.welcomeTitle{
  font-weight:720;
  letter-spacing:.2px;
  font-size:18px;
}
.welcomeSub{
  margin-top:8px;
  color:rgba(255,255,255,.68);
  font-size:13px;
  line-height:1.35;
}
.welcomeHint{
  display:inline-block;
  margin-left:6px;
  color:rgba(255,255,255,.52);
}
.welcomeCta{
  margin-top:14px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:rgba(255,255,255,.90);
  user-select:none;
}

.cardTop{
  display:grid;
  grid-template-columns: 104px 1fr;
  gap:14px;
  align-items:center;
}

.artFrame{
  width:104px;
  height:104px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background: rgba(255,255,255,.03);
  position:relative;
}
.art{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.02);
  opacity:1;
  transition: opacity 240ms var(--ease);
}
.artPlaceholder{
  background-image:
    radial-gradient(60px 60px at 20% 25%, rgba(255,255,255,.08), transparent 55%),
    radial-gradient(90px 80px at 65% 70%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.meta{min-width:0}
.titleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.titleWrap{min-width:0}
.trackTitle{
  font-size:18px;
  font-weight:650;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trackArtist{
  margin-top:2px;
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.appIcon{
  width:28px;
  height:28px;
  color:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.03);
  flex:0 0 auto;
  overflow:hidden;
}
.appIconImg{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  filter: saturate(1.05) contrast(1.05);
}

.row{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.label{
  font-size:12px;
  color:rgba(255,255,255,.62);
  user-select:none;
}
.select{
  appearance:none;
  -webkit-appearance:none;
  font-size:12px;
  color:var(--fg);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:8px 28px 8px 10px;
  outline:none;
  min-width: 190px;
  max-width: 260px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.select:focus{border-color:rgba(255,255,255,.22); box-shadow:0 0 0 4px rgba(255,255,255,.05)}

.progress{
  margin-top:14px;
  padding-top:10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.timeRow{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:rgba(255,255,255,.56);
  margin-bottom:8px;
}

.controls{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:center;
}
.btnRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  border-radius:14px;
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition: transform 120ms var(--ease), border-color 120ms var(--ease), background 120ms var(--ease);
}
.btn:hover{border-color:rgba(255,255,255,.22); background: rgba(255,255,255,.05)}
.btn:active{transform: translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.06)}

.iconBtn{width:44px; padding:0}
.iconBtn svg{width:20px; height:20px}
.iconBtn[aria-pressed="true"]{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.07);
}

.libraryBtn{
  min-width: 220px;
  justify-content:space-between;
}

.playBtn{
  width:56px;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.playBtn svg{width:22px; height:22px}
.pauseIcon{display:none}
body.playing .playIcon{display:none}
body.playing .pauseIcon{display:block}

.volRow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* Range styling (minimal, modern) */
.range{
  width:100%;
  height:26px;
  background:transparent;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
}
.range::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  margin-top:-5px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}
.range::-moz-range-track{
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.16);
}
.range::-moz-range-thumb{
  width:14px;
  height:14px;
  border:none;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow: 0 0 0 6px rgba(255,255,255,.10)}
.range:focus-visible::-moz-range-thumb{box-shadow: 0 0 0 6px rgba(255,255,255,.10)}

/* Track-change crossfade */
.card[data-changing="true"] .trackTitle,
.card[data-changing="true"] .trackArtist{
  opacity:.05;
  transform: translateY(2px);
}
.trackTitle,.trackArtist{
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.card[data-changing="true"] .art{
  opacity:.0;
}

.library{
  position:fixed;
  inset:0;
  z-index:20;
}
.library[hidden]{display:none}
.libraryBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fadeIn 220ms var(--ease);
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.libraryPanel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:min(760px, 94vw);
  max-height:min(560px, 86vh);
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(22,24,28,.70), rgba(22,24,28,.34));
  box-shadow: 0 24px 80px rgba(0,0,0,.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow:hidden;
}
.libraryHeader{
  height:56px;
  padding:12px 12px 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.libraryTitle{font-weight:720; letter-spacing:.2px}
.libraryBody{
  display:grid;
  grid-template-columns: 220px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}
.libraryLeft{
  border-right:1px solid rgba(255,255,255,.08);
  padding:12px;
  overflow:auto;
  min-height:0;
}
.libraryRight{
  padding:12px;
  overflow:auto;
  min-height:0;
}
.libraryLabel{
  font-size:12px;
  color:rgba(255,255,255,.55);
  margin-bottom:10px;
}
.playlistList{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.playlistItem{
  width:100%;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color:rgba(255,255,255,.88);
  border-radius:14px;
  padding:10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  transition: border-color 120ms var(--ease), background 120ms var(--ease), transform 120ms var(--ease);
}
.playlistItem:hover{border-color:rgba(255,255,255,.20); background: rgba(255,255,255,.04)}
.playlistItem:active{transform: translateY(1px)}
.playlistItem[aria-current="true"]{
  border-color:rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
}
.playlistCount{
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.trackList{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.trackItem{
  width:100%;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius:14px;
  padding:10px 10px;
  color:rgba(255,255,255,.90);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition: border-color 120ms var(--ease), background 120ms var(--ease), transform 120ms var(--ease);
}
.trackItem:hover{border-color:rgba(255,255,255,.18); background: rgba(255,255,255,.04)}
.trackItem:active{transform: translateY(1px)}
.trackMain{min-width:0}
.trackName{
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trackBy{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.58);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.trackNow{
  font-size:12px;
  color:rgba(255,255,255,.60);
  flex:0 0 auto;
}

@media (max-width: 520px){
  body{overflow:auto}
  .stage{padding:18px}
  .controls{grid-template-columns: 1fr}
  .volRow{justify-content:space-between}
}

@media (max-width: 720px){
  .libraryBody{grid-template-columns: 1fr}
  .libraryLeft{border-right:none; border-bottom:1px solid rgba(255,255,255,.08)}
}