body {
  background-color: #494d64;
  color: #f0c6c6;
  font-family: 'Segoe UI', monospace;
  margin: 0;
  padding: 0 0 32px 0;
}

.directory {
  max-width: 66.66vw;      /* changed from 480px */
  margin: 30px auto;
  background: #181926;
  padding: 24px 32px;
  border-radius: 16px;
  box-shadow: 0px 4px 12px #2226;
  word-break: break-word; /* allow breaking long words inside */
}

ul.tree {
  list-style: none;
  padding-left: 0;
  max-width: 100%;
  overflow-wrap: break-word; /* wrap long lines */
  word-wrap: break-word;     /* for older browsers */
}

.tree ul {
  list-style: none;
  padding-left: 26px;
  margin: 0;
}

.folder, .file {
  padding: 5px 0 5px 18px;
  color: #f0c6c6;
  position: relative;
  background: none;
  border: none;
  max-width: 100%;
  overflow-wrap: break-word; /* wrap long folder/file names */
  word-break: break-word;
  white-space: normal;        /* let text wrap normally */
}

.folder::before {
  content: "📁";
  position: absolute;
  left: 0;
  color: #c6a0f6;
}

.file a {
  color: #ed8796;
  text-decoration: none;
  position: relative;
  padding-left: 22px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

.file a::before {
  content: "🎵";
  position: absolute;
  left: 0;
  color: #ed8796;
}

.file a:hover {
  text-decoration: underline;
  color: #f0c6c6;
}

.folder {
  background: #22233a;
}

.file {
  padding-left: 0;
}