:root {
  color-scheme: dark;
  font-family: Inter, 'Aptos', 'Segoe UI', sans-serif;
  background: #050912;
  color: #eff4fa;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 18%, rgba(42, 96, 115, 0.2), transparent 38%),
    linear-gradient(180deg, #07101c, #040811 72%);
}

.playlist-page__skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  color: #06101e;
}

.playlist-page__skip:focus {
  transform: none;
}

.playlist-page__topbar {
  display: flex;
  min-height: 58px;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 34px);
  border-bottom: 1px solid rgba(86, 107, 137, 0.3);
  background: rgba(5, 9, 18, 0.9);
}

.playlist-page__brand {
  color: #eff4fa;
  text-decoration: none;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: -0.02em;
}

.playlist-page__main {
  display: grid;
  min-height: calc(100dvh - 58px);
  grid-template-columns: minmax(0, 1fr);
  place-items: start center;
  padding: clamp(42px, 13vh, 132px) clamp(12px, 4vw, 38px) 48px;
}

.playlist-page__mount {
  width: 100%;
  min-width: 0;
}

@media (max-width: 520px) {
  .playlist-page__main {
    padding-top: 34px;
  }
}