:root {
  color-scheme: dark;
  --ink: #080b0d;
  --paper: #d9d7cd;
  --cyan: #279ab2;
  --cyan-dark: #0a5263;
  --red: #bb2b25;
  --line: rgba(217, 215, 205, .24);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    linear-gradient(rgba(8,11,13,.95), rgba(8,11,13,.95)),
    repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,255,255,.03) 6px 7px);
  color: var(--paper);
  font-family: "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

button, input { font: inherit; }
button { color: inherit; }

.shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 26px 0 38px;
}

.masthead {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.back {
  width: max-content;
  color: var(--paper);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
}

.back:hover { color: var(--cyan); }

.wordmark {
  font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
  font-stretch: condensed;
  font-weight: 300;
  letter-spacing: .16em;
  font-size: clamp(1rem, 2vw, 1.35rem);
  transform: skew(-4deg);
}

.archive {
  justify-self: end;
  color: var(--cyan);
  font: 700 .68rem/1 monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.player {
  display: grid;
  grid-template-columns: minmax(380px, .92fr) minmax(420px, 1.08fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
  min-height: calc(100vh - 122px);
  padding: 34px 0 16px;
}

.art-panel { min-width: 0; }

.art-wrap {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  background: #12171a;
  box-shadow: -14px 16px 0 var(--cyan-dark), 12px -12px 0 rgba(187,43,37,.7);
}

.cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(.88);
}

.edition {
  position: absolute;
  right: 13px;
  bottom: 11px;
  padding: 5px 7px;
  background: var(--paper);
  color: var(--ink);
  font: 800 .65rem/1 monospace;
  letter-spacing: .12em;
}

.now {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-top: 27px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.eyebrow {
  color: var(--cyan);
  font: 700 .68rem/1 monospace;
  text-transform: uppercase;
  letter-spacing: .15em;
}

.now h1 {
  margin: 7px 0 0;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: 1;
  letter-spacing: -.045em;
  font-weight: 500;
}

.big-number {
  color: rgba(217,215,205,.22);
  font: 300 clamp(2.5rem, 5vw, 4.5rem)/.75 "Arial Narrow", sans-serif;
}

.timeline {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 11px;
  align-items: center;
  padding: 18px 0 12px;
  font: 700 .7rem/1 monospace;
  color: rgba(217,215,205,.7);
}

input[type="range"] {
  --progress: 0%;
  width: 100%;
  height: 3px;
  appearance: none;
  background: linear-gradient(90deg, var(--cyan) var(--progress), rgba(217,215,205,.25) var(--progress));
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 0;
  background: var(--paper);
}

input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
}

.transport {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control {
  border: 1px solid var(--line);
  background: transparent;
  min-width: 48px;
  height: 44px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.control:hover { background: rgba(39,154,178,.16); }
.control:active { transform: translateY(2px); }
.control:focus-visible, .track:focus-visible, .back:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.control.primary {
  width: 62px;
  height: 62px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
}

.control.primary:hover { background: var(--cyan); }
.control.sound { margin-left: auto; font: 800 .65rem/1 monospace; letter-spacing: .1em; }

.list-panel {
  min-width: 0;
  border-top: 4px solid var(--paper);
}

.list-head {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 16px;
  font: 700 .7rem/1 monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(217,215,205,.65);
}

.playlist { list-style: none; margin: 0; padding: 0; }

.track {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 0 13px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.track:last-child { border-bottom: 1px solid var(--line); }
.track::before { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; z-index: -1; }
.track:hover::before { transform: scaleX(1); }
.track:hover { color: var(--ink); }

.track.active {
  color: var(--ink);
  background: var(--cyan);
}

.track-number { text-align: center; font: 800 .72rem/1 monospace; opacity: .62; }
.track-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(.96rem, 1.45vw, 1.1rem); letter-spacing: .005em; }
.track-time { font: 700 .7rem/1 monospace; opacity: .6; }

.track.active .track-number::before {
  content: "▶";
  margin-right: 6px;
  font-size: .58rem;
}

.note {
  margin: 15px 0 0;
  color: rgba(217,215,205,.45);
  font: .68rem/1.4 monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

@media (max-width: 850px) {
  .shell { width: min(100% - 32px, 640px); padding-top: 16px; }
  .masthead { grid-template-columns: auto 1fr; gap: 18px; }
  .wordmark { justify-self: end; }
  .archive { display: none; }
  .player { grid-template-columns: 1fr; gap: 46px; min-height: auto; padding-top: 34px; }
  .art-wrap { margin: 0 auto; width: min(92%, 500px); }
}

@media (max-width: 480px) {
  .shell { width: calc(100% - 24px); }
  .masthead { min-height: 50px; }
  .back span { display: none; }
  .wordmark { font-size: .92rem; letter-spacing: .09em; }
  .art-wrap { width: calc(100% - 16px); box-shadow: -8px 9px 0 var(--cyan-dark), 7px -7px 0 rgba(187,43,37,.7); }
  .now { margin-top: 22px; }
  .big-number { font-size: 2.8rem; }
  .track { min-height: 62px; grid-template-columns: 39px minmax(0, 1fr) auto; gap: 7px; padding-right: 8px; }
  .track-title { font-size: .94rem; }
  .control.secondary { min-width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { scroll-behavior: auto !important; transition: none !important; }
}