:root {
  --bg: #060606;
  --panel: rgba(17, 17, 17, .86);
  --panel-2: rgba(29, 29, 29, .72);
  --text: #f6f4f1;
  --muted: #aaa7a2;
  --dim: #686662;
  --line: rgba(255, 255, 255, .13);
  --chrome: linear-gradient(180deg, #fff 0%, #c8c8c8 24%, #4d4d4d 47%, #f8f8f8 68%, #8f8f8f 100%);
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 70% -10%, rgba(255,255,255,.11), transparent 32rem),
    radial-gradient(circle at 0% 100%, rgba(255,255,255,.055), transparent 38rem),
    #060606;
}
button, input { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  z-index: 30;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}
.eyebrow {
  margin: 0;
  letter-spacing: .24em;
  font-size: .67rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--muted);
}

/* Entry */
.entrance {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(400px, .95fr);
  position: relative;
  overflow: hidden;
  background: #080808;
}
.entrance::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 36%, rgba(5,5,5,.35) 51%, rgba(5,5,5,.94) 67%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45));
}
.entrance-cover-wrap {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #ddd;
}
.entrance-cover {
  width: 100%;
  height: 100%;
  min-height: 100svh;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.03) brightness(.92);
  transform: scale(1.012);
  animation: cover-breathe 12s ease-in-out infinite alternate;
}
@keyframes cover-breathe { to { transform: scale(1.045); } }
.cover-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 34%, rgba(255,255,255,.18) 48%, transparent 59%);
  translate: -115% 0;
  animation: reflection-pass 8s 1.2s ease-in-out infinite;
}
@keyframes reflection-pass {
  0%, 58% { translate: -115% 0; }
  83%, 100% { translate: 115% 0; }
}
.entrance-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(2rem, 6vw, 7rem);
  margin-left: -5vw;
}
.chrome-z {
  margin: .35rem 0 -.25rem;
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(8rem, 18vw, 17rem);
  font-weight: 400;
  line-height: .76;
  letter-spacing: -.11em;
  padding-right: .11em;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.15)) drop-shadow(0 24px 45px rgba(0,0,0,.7));
  position: relative;
}
.chrome-z::after {
  content: "Z";
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.38);
  filter: blur(.2px);
}
.entrance h1 {
  font-family: Italiana, "Times New Roman", serif;
  font-size: clamp(2.7rem, 6vw, 6.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .15em;
  margin: 0 0 1.3rem;
  text-shadow: 0 0 30px rgba(255,255,255,.08);
}
.welcome-message {
  max-width: 39rem;
  margin: 0 0 2rem;
  color: #cbc8c3;
  font-size: clamp(.92rem, 1.25vw, 1.08rem);
  line-height: 1.82;
  font-weight: 300;
}
.welcome-message em { color: #fff; font-family: Italiana, serif; font-size: 1.12em; }
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-width: min(100%, 19rem);
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(135deg, #f8f8f8, #b7b7b7 54%, #fff);
  color: #080808;
  padding: 1rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 13px 52px rgba(255,255,255,.15), inset 0 1px rgba(255,255,255,.8);
  transition: transform .25s ease, box-shadow .25s ease;
}
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 60px rgba(255,255,255,.23); }
.headphones { color: var(--dim); font-size: .72rem; margin: 1rem 0 0; letter-spacing: .04em; }

/* Main experience */
.experience { max-width: 1440px; margin: 0 auto; padding: clamp(1rem, 3vw, 2.5rem); }
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
}
.brand-lockup { display: flex; align-items: center; gap: .9rem; }
.mini-z {
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  font-family: Italiana, serif;
  font-size: 2rem;
  line-height: 1;
  color: transparent;
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: inset 0 0 20px rgba(255,255,255,.05);
}
.topbar h2 { font-family: Italiana, serif; letter-spacing: .13em; margin: .12rem 0 0; font-size: 2rem; font-weight: 400; }
.album-stat { display: flex; gap: .5rem; color: var(--muted); font-size: .78rem; }
.layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 1.25rem; }
.now-playing-card, .tracklist-panel {
  background: linear-gradient(180deg, rgba(24,24,24,.88), rgba(9,9,9,.94));
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  box-shadow: 0 20px 70px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.025);
}
.now-playing-card { padding: clamp(1rem,3vw,2rem); position: sticky; top: 1rem; align-self: start; }
.cover-wrap { position: relative; }
.cover {
  width: min(100%, 620px);
  aspect-ratio: 1 / 1;
  margin: auto;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #d9d7d4;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 26px 70px rgba(0,0,0,.58), 0 0 35px rgba(255,255,255,.035);
}
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover-metal-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 0 40px rgba(0,0,0,.06);
}
.cover-metal-frame::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.17) 50%, transparent 57%);
  transform: rotate(10deg);
  animation: art-sheen 9s ease-in-out infinite;
}
@keyframes art-sheen { 0%, 64% { translate: -60% 0; } 100% { translate: 60% 0; } }
#visualizer { width: 100%; height: 76px; position: absolute; left: 0; bottom: 0; z-index: 2; opacity: .72; pointer-events: none; }
.track-meta { margin-top: 1.5rem; }
.track-meta h3 { font-family: Italiana, serif; font-size: clamp(2rem,5vw,3.75rem); font-weight: 400; margin: .35rem 0 .1rem; line-height: 1.06; }
.artist { margin: 0; color: var(--muted); }
.progress-group { margin-top: 1.5rem; }
.seek, #volume { width: 100%; accent-color: #f2f2f2; cursor: pointer; }
.time-row { display: flex; justify-content: space-between; color: var(--muted); font-size: .72rem; margin-top: .35rem; }
.controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: 1rem 0; }
.icon-btn, .favorite-btn, .text-btn { border: 0; background: transparent; cursor: pointer; }
.icon-btn { width: 2.8rem; height: 2.8rem; border-radius: 50%; font-size: 1.1rem; }
.icon-btn:hover { background: rgba(255,255,255,.07); }
.play-btn {
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(145deg, #fff, #9e9e9e 58%, #f8f8f8);
  color: #090909;
  cursor: pointer;
  font-size: 1.35rem;
  box-shadow: 0 11px 36px rgba(255,255,255,.17), inset 0 1px rgba(255,255,255,.9);
}
.volume-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; color: var(--muted); font-size: .68rem; letter-spacing: .1em; }
.favorite-btn { font-size: 1.7rem; color: #d9d4cb; }
.favorite-btn.active { color: #fff; transform: scale(1.08); }
.continuity { color: #65625d; font-size: .72rem; text-align: center; margin: 1rem 0 0; }
.tracklist-panel { padding: 1.3rem; max-height: calc(100svh - 2rem); overflow: auto; }
.tracklist-heading {
  position: sticky;
  top: -1.3rem;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: end;
  background: rgba(13,13,13,.97);
  padding: 1.3rem 0 1rem;
  border-bottom: 1px solid var(--line);
}
.tracklist-heading h3 { margin: .2rem 0 0; font-family: Italiana, serif; font-size: 2.15rem; font-weight: 400; }
.text-btn { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.tracklist { list-style: none; padding: 0; margin: 0; }
.track {
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr) auto auto;
  align-items: center;
  gap: .75rem;
  padding: .95rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: .2s ease;
  border-radius: .7rem;
}
.track:hover { background: rgba(255,255,255,.045); }
.track.active { background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.track-number, .track-duration { color: var(--muted); font-size: .72rem; }
.track-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.track-heart { color: #bbb; font-size: 1rem; width: 1.2rem; }
.track.active .track-number { color: #fff; }
footer { display: flex; justify-content: space-between; gap: 1rem; color: #58554f; font-size: .7rem; padding: 1.5rem .3rem 0; }

@media (max-width: 980px) {
  .entrance { grid-template-columns: 1fr; min-height: auto; }
  .entrance::before { background: linear-gradient(180deg, transparent 22%, rgba(5,5,5,.25) 48%, rgba(5,5,5,.98) 70%); }
  .entrance-cover-wrap, .entrance-cover { min-height: 64svh; height: 64svh; }
  .entrance-cover { object-position: center 30%; }
  .entrance-content { min-height: 56svh; margin: -20svh 0 0; padding: 3rem 1.3rem 3.5rem; align-items: center; text-align: center; }
  .chrome-z { font-size: clamp(8rem, 36vw, 14rem); }
  .welcome-message { max-width: 36rem; }
}
@media (max-width: 850px) {
  .layout { grid-template-columns: 1fr; }
  .now-playing-card { position: relative; top: 0; }
  .tracklist-panel { max-height: none; }
  .topbar { align-items: start; }
  .album-stat { display: none; }
}
@media (max-width: 520px) {
  .experience { padding: .7rem; }
  .now-playing-card, .tracklist-panel { border-radius: 1rem; }
  .entrance-cover-wrap, .entrance-cover { height: 58svh; min-height: 58svh; }
  .entrance-content { margin-top: -16svh; }
  .entrance h1 { font-size: 2.85rem; }
  .welcome-message { font-size: .88rem; line-height: 1.72; }
  .track-meta h3 { font-size: 2.35rem; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; scroll-behavior: auto !important; } }