:root {
  --bg:     #202B41;
  --panel:  #2B3750;
  --panel2: #3D485E;
  --text:   #DEE2E9;
  --muted:  #AEB7C6;
  --link:   #FFFFFF;
  --border: rgba(222,226,233,.18);
  --shadow: rgba(0,0,0,.25);
  --radius: 10px;
  --max:    860px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 Georgia, "Times New Roman", Times, serif;
}
a { color: var(--link); text-decoration: underline; }
a:hover { opacity: .9; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
}

/* ── Page shell ─────────────────────────────────────────── */
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;       /* centre every direct child horizontally */
}

/* ── Header ─────────────────────────────────────────────── */
.header {
  width: 100%;
  max-width: var(--max);
  padding: 18px 12px 8px;
}
.header img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--shadow);
}

/* ── Divider images ─────────────────────────────────────── */
.divider {
  width: 100%;
  max-width: var(--max);
  padding: 0 12px 18px;
}
.divider img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  opacity: .9;
}

/* ── Main content area ──────────────────────────────────── */
.content {
  width: 100%;
  max-width: var(--max);
  padding: 0 12px 28px;
}

/* Two-column grid: player | info */
.grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
}

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, rgba(61,72,94,.92), rgba(43,55,80,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  overflow: hidden;
}

.card__title {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(32,43,65,.35);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

/* ── Typography inside cards ────────────────────────────── */
.title  { margin: 0; padding: 14px 12px 6px; font-size: 22px; letter-spacing: .02em; }
.strap  { margin: 0; padding: 0 12px 12px;   color: var(--muted); }
.foot   { margin: 0; padding: 12px;           color: var(--muted); font-size: 13px; }
.muted  { color: var(--muted); }
.subhead {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.links  { margin: 0; padding: 0 12px 12px 28px; }
.links li  { margin: 4px 0; }
.steps  { margin: 0; padding: 0 12px 12px 28px; }
.steps li  { margin: 6px 0; }

/* ── Image dividers inside cards ────────────────────────── */
.imgdiv { padding: 4px 12px 8px; }
.imgdiv img { width: 100%; height: auto; opacity: .9; }

/* ── Player ─────────────────────────────────────────────── */
.player {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.now { font-size: 13px; }
.now__label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.now__title { color: var(--text); font-size: 14px; min-height: 1.4em; }

.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

button {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(32,43,65,.35);
  color: var(--text);
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.btn--primary { background: rgba(222,226,233,.12); }
button:hover  { background: rgba(32,43,65,.5); }
button:active { transform: translateY(1px); }

.seekrow { display: flex; flex-direction: column; gap: 4px; }
.seek    { width: 100%; }

.time {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: 13px;
}
.time__sep { opacity: .7; }

.smalllinks { font-size: 13px; color: var(--muted); padding: 0 4px; }
.hint       { font-size: 12px; color: var(--muted); padding: 4px 0 0; }

/* ── Tracklist ───────────────────────────────────────────── */
.tracklist {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.track {
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: baseline;
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: rgba(32,43,65,.18);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.track:hover     { border-color: var(--border); background: rgba(32,43,65,.28); }
.track.is-active { border-color: rgba(255,255,255,.25); background: rgba(32,43,65,.38); }
.track__num   { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.4em; font-size: 13px; }
.track__title { color: var(--text); font-size: 14px; }

/* ── Player card — terminal control panel ───────────────── */

/* Faster, more reactive haze than the right — like a signal
   being dialled in rather than dreamily drifting */
@keyframes haze-left {
  0%,100% { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
  20%     { filter: blur(0.25px); text-shadow: -1px 0 2px rgba(255,200,80,.20),  1px 0 1px rgba(80,255,160,.15); }
  45%     { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
  65%     { filter: blur(0.4px); text-shadow:  1px 0 2px rgba(80,255,160,.18), -1px 0 2px rgba(255,160,40,.14); }
  85%     { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
}

.player-card {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
}

/* Apply haze to the whole player card content */
.player-card .player,
.player-card .tracklist,
.player-card .subhead,
.player-card .links,
.player-card .card__title {
  animation: haze-left 4s ease-in-out infinite;
}

/* Each section animates independently with a slight phase offset
   so they don't all blur/clear at exactly the same moment */
.player-card .tracklist  { animation-delay: -1.3s; }
.player-card .subhead    { animation-delay: -0.6s; }
.player-card .links      { animation-delay: -2.1s; }
.player-card .card__title{ animation-delay: -0.3s; }

/* Hover: amber/green chromatic split — distinct from right card's cyan/magenta */
.player-card:hover .player,
.player-card:hover .tracklist,
.player-card:hover .subhead,
.player-card:hover .links,
.player-card:hover .card__title {
  animation: none;
  filter: blur(0px);
  text-shadow:
    -2px 0 3px rgba(255,200,0,.28),
     2px 0 3px rgba(0,255,140,.22),
     0   0 8px rgba(255,220,100,.10);
  transition: text-shadow .15s ease;
}

/* Scan-line overlay on hover — amber tint vs right card's teal */
.player-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,200,0,.012) 2px,
    rgba(255,200,0,.012) 4px
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.player-card:hover::before { opacity: 1; }

/* Card title */
.player-card .card__title {
  font-family: "Courier New", Courier, monospace;
  letter-spacing: .14em;
  font-size: 11px;
  color: rgba(255,200,80,.75);
}

/* Now-playing block */
.player-card .now__label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: lowercase;
  color: rgba(255,200,80,.7);
}
.player-card .now__title {
  font-size: 13px;
  color: var(--text);
  letter-spacing: .04em;
  min-height: 1.4em;
}

/* Buttons */
.player-card button {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: .08em;
  border-color: rgba(255,200,80,.20);
  color: rgba(255,220,120,.9);
  background: rgba(32,43,65,.4);
  padding: 6px 10px;
}
.player-card button:hover {
  background: rgba(255,200,80,.08);
  border-color: rgba(255,200,80,.35);
  color: #fff;
}
.player-card .btn--primary {
  background: rgba(255,200,80,.10);
  border-color: rgba(255,200,80,.30);
}

/* Time display */
.player-card .time {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: rgba(255,200,80,.55);
  letter-spacing: .06em;
}

/* Download link */
.player-card .smalllinks a {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,200,80,.65);
  text-decoration: none;
}
.player-card .smalllinks a:hover {
  color: rgba(255,220,120,1);
}

/* Subheadings */
.player-card .subhead {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(255,200,80,.65);
  padding: 8px 12px 6px;
}

/* Links list */
.player-card .links a {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(200,220,255,.7);
  text-decoration: none;
}
.player-card .links a:hover { color: #fff; }

/* ── Track buttons ───────────────────────────────────────── */
.track {
  font-family: "Courier New", Courier, monospace;
  background: transparent;
  border-color: transparent;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background .15s, border-color .15s, text-shadow .15s;
}

.track__prompt {
  color: rgba(255,200,80,.5);
  margin-right: .2em;
  font-weight: bold;
  transition: color .15s;
  flex-shrink: 0;
}
.track__num {
  color: rgba(255,200,80,.4);
  font-size: 11px;
  min-width: 2.2em;
  flex-shrink: 0;
  transition: color .15s;
}
.track__title {
  color: rgba(200,215,235,.8);
  font-size: 12px;
  flex: 1;
  text-align: left;
  transition: color .15s;
}
.track__dots {
  color: rgba(255,200,80,.25);
  font-size: 11px;
  letter-spacing: .08em;
  flex-shrink: 0;
  transition: color .15s, letter-spacing .2s;
}

/* Track hover */
.track:hover {
  background: rgba(255,200,80,.06);
  border-color: rgba(255,200,80,.18);
  text-shadow:
    -1px 0 2px rgba(255,200,0,.22),
     1px 0 2px rgba(0,255,140,.18);
}
.track:hover .track__prompt { color: rgba(255,200,80,.9); }
.track:hover .track__num    { color: rgba(255,200,80,.7); }
.track:hover .track__title  { color: #fff; }
.track:hover .track__dots   { color: rgba(255,200,80,.6); letter-spacing: .16em; }

/* Active / now-playing track */
.track.is-active {
  background: rgba(255,200,80,.08);
  border-color: rgba(255,200,80,.30);
}
.track.is-active .track__prompt { color: rgba(255,200,80,1); }
.track.is-active .track__num    { color: rgba(255,200,80,.8); }
.track.is-active .track__title  { color: #fff; letter-spacing: .02em; }
.track.is-active .track__dots   {
  color: rgba(255,200,80,.7);
  letter-spacing: .18em;
  animation: dots-pulse 2s ease-in-out infinite;
}

@keyframes dots-pulse {
  0%,100% { opacity: 1; letter-spacing: .18em; }
  50%     { opacity: .4; letter-spacing: .06em; }
}

/* ── Liner notes ────────────────────────────────────────── */

/* Ambient haze: oscillates between sharp and slightly smeared.
   Uses chromatic-aberration-style text-shadow shifts so it feels
   like a signal drifting in and out of focus rather than just blur. */
@keyframes haze {
  0%   { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
  18%  { filter: blur(0.3px); text-shadow: -1px 0 2px rgba(120,200,255,.18), 1px 0 2px rgba(255,80,160,.14); }
  35%  { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
  52%  { filter: blur(0.5px); text-shadow: 1px 0 3px rgba(80,255,200,.16), -1px 0 2px rgba(200,80,255,.12); }
  70%  { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
  84%  { filter: blur(0.2px); text-shadow: -1px 0 1px rgba(255,200,80,.14),  1px 0 2px rgba(80,120,255,.12); }
  100% { filter: blur(0px);   text-shadow: 0 0 0 transparent; }
}

/* Hover: deliberate chromatic aberration + warp. No animation needed —
   the transition itself feels organic. */
@keyframes glitch-hover {
  0%,100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
  20%      { clip-path: inset(15% 0 60% 0); transform: translate(-2px, 0); }
  40%      { clip-path: inset(50% 0 20% 0); transform: translate(2px, 0); }
  60%      { clip-path: inset(30% 0 40% 0); transform: translate(-1px, 0); }
  80%      { clip-path: inset(0 0 0 0);      transform: translate(1px, 0); }
}

.liner-card { position: relative; overflow: hidden; }

.liner {
  padding: 20px 18px 24px;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  /* Run haze at rest — slow, dreamy, irregular cadence */
  animation: haze 7s ease-in-out infinite;
}

/* On hover: swap to the sharper chromatic split + add a warp pseudo-layer */
.liner:hover {
  animation: none;
  filter: blur(0px);
  text-shadow:
    -2px 0 3px rgba(0,255,220,.22),
     2px 0 3px rgba(255,0,160,.22),
     0   0 8px rgba(180,220,255,.10);
  transition: text-shadow .15s ease;
}

/* Glitch sweep on the card itself when hovered */
.liner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,255,200,.015) 2px,
    rgba(0,255,200,.015) 4px
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.liner-card:hover::before { opacity: 1; }

/* ── Liner typography ───────────────────────────────────── */
.liner p { margin: 0 0 .6em; }

.liner-cmd {
  color: rgba(180,230,255,.9);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: lowercase;
  margin-bottom: .3em !important;
}

.prompt {
  color: rgba(0,220,180,.85);
  margin-right: .3em;
  font-weight: bold;
}

.liner-body {
  color: var(--text);
  font-size: 13px;
}

.liner-body strong {
  color: #fff;
  font-weight: normal;
  letter-spacing: .04em;
}

.liner-indent {
  padding-left: 1.5em;
  color: var(--muted);
  font-style: italic;
}

.liner-sub {
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: .06em;
  margin-top: -.2em !important;
}

.liner-sep {
  width: 60%;
  margin: 12px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,180,.35), transparent);
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  width: 100%;
  max-width: var(--max);
  display: flex;
  justify-content: center;
  padding: 18px 12px 28px;
  color: var(--muted);
  font-size: 12px;
}