:root { color-scheme: dark; background: #060813; }
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #060813; }
/* All coordinates are Photoshop master pixels, converted to section percentages.
   The section windows preserve the PSD's layer overlaps and 2708px canvas crop. */
.visual-section {
  position: relative;
  width: 100%;
  aspect-ratio: 2043 / var(--section-height);
  overflow: hidden;
}
.section-art {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  top: calc(var(--art-offset, 0) / var(--section-height) * 100%);
}
.overlay {
  position: absolute;
  left: calc(var(--x) / 2043 * 100%);
  top: calc(var(--y) / var(--section-height) * 100%);
  width: calc(var(--w) / 2043 * 100%);
  height: calc(var(--h) / var(--section-height) * 100%);
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.overlay:focus-visible { outline: 2px solid #f97bfa; outline-offset: 2px; }
.image-control img { display: block; width: 100%; height: 100%; }
.track-art { object-fit: contain; cursor: default; }
.playlist { container-type: inline-size; }
.play-all {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88cqw;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1;
}
.play-all:hover { border-color: #fff; }
.play-all:active { opacity: 0.8; }
.play-all:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.track-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 1.762114cqw; /* 36px at the 2043px master width */
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  cursor: default;
  pointer-events: none;
}
.status {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  max-width: min(90vw, 420px);
  padding: 12px 18px;
  border: 1px solid #c95dcb;
  background: #090b18;
  color: #f6eafa;
  font: 14px/1.5 system-ui, sans-serif;
  text-align: center;
}
.status[hidden] { display: none; }